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

Line 331: Line 331:
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
 +
#top-bar{
 +
width:100%;
 +
height:50px;
 +
background:#32b3bf;
 +
position:fixed;
 +
top:-65px;
 +
 +
/* CSS3 陰影*/
 +
-webkit-box-shadow: 0px 8px 15px #333;
 +
-moz-box-shadow: 0px 8px 15px #333;
 +
box-shadow: 0px 8px 15px #333;
 +
}
 
 
 
</style>
 
</style>
Line 338: Line 350:
  
 
<!-- 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 class="top">
+
<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 543: Line 556:
 
</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>
  

Revision as of 15:23, 31 October 2017