Difference between revisions of "Team:NTHU Taiwan/M"

 
(2 intermediate revisions by the same user not shown)
Line 15: Line 15:
  
 
.igem_2017_menu_wrapper {
 
.igem_2017_menu_wrapper {
                position: fixed;
 
 
border-bottom: 3px solid #c2dac0;
 
border-bottom: 3px solid #c2dac0;
 
background-color:#f6f6e3;
 
background-color:#f6f6e3;
Line 21: Line 20:
 
overflow: hidden;
 
overflow: hidden;
 
margin-left: 20px;
 
margin-left: 20px;
 +
                position: fixed; width:100%;
 
}
 
}
  
Line 123: Line 123:
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
/* Wrapper for the content */
 
/* Wrapper for the content */
.top {
 
position: fixed;
 
}
 
 
.igem_2017_content_wrapper {
 
.igem_2017_content_wrapper {
 
width: 100%;
 
width: 100%;
Line 331: Line 328:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
#top-bar{
 
position:fixed;
 
 
/* CSS3 陰影*/
 
-webkit-box-shadow: 0px 8px 15px #333;
 
-moz-box-shadow: 0px 8px 15px #333;
 
box-shadow: 0px 8px 15px #333;
 
}
 
 
 
 
</style>
 
</style>
Line 346: Line 335:
  
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
 
+
  
 
</head>
 
</head>
  
  
<div id="top-bar">
+
 
 
<div class="igem_2017_menu_wrapper" >
 
<div class="igem_2017_menu_wrapper" >
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
Line 549: Line 537:
 
</div>
 
</div>
  
</div>
 
 
</div>
 
</div>
  
<script type='text/javascript'>
 
$(function(){
 
 $(window).load(function(){
 
  $(window).bind('scroll resize', function(){
 
  var $this = $(this);
 
  var $this_Top=$this.scrollTop();
 
  
  //當高度小於100時,關閉區塊
 
  if($this_Top < 100){
 
   $('#top-bar').stop().animate({top:"-65px"});
 
   }
 
    if($this_Top > 100){
 
    $('#top-bar').stop().animate({top:"0px"});
 
    }
 
  }).scroll();
 
 });
 
});
 
</script>
 
 
<script>
 
<script>
  

Latest revision as of 15:27, 31 October 2017