黑寶的電腦教學網

:::

CSS的垂直置中,左右置中

製作浮動式的回到網頁頂部按鈕 next

DREAMWEAVER
===========

<div class="g-336-280-2"><div class="g-336-280-2_top"> </div> </div>- - - - - -

<div class="code"> ```

#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;	 
}
```

</div>- - - - - -

<font color="#0066FF" size="5" style="font-size: 21px; color: rgb(38, 152, 162); margin: 25px 0px 0px; padding-bottom: 7px; padding-left: 10px; padding-top: 7px; border-top: 1px solid rgb(38, 152, 162); border-bottom: 5px solid rgb(38, 152, 162); background: rgb(245, 245, 245) none repeat scroll 0% 0%; clear: both; display: block;">**Javascript：**</font>  
 <span class="codetitle">放在<head>.....</head>之間：</span>  
 當滾動超過100像素時，上面選單就滑出，若要再多一點的話，可自行修改this\_Top中的數值，若要改變上選單高度時，再修改top:後方的數值即可。

<div class="code"><script type='text/javascript' src="jquery-1.9.1.min.js"></script>  
 <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></div>- - - - - -

:::

主選單

會員登入

MarkDown

主選單

會員登入