• slider image 145
  • slider image 140
  • slider image 142
  • slider image 143
:::
prev CSS的垂直置中,左右置中
製作浮動式的回到網頁頂部按鈕next
DREAMWEAVER
 

CSS樣式：


放在<head>.....</head>之間：

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

Javascript：
放在<head>.....</head>之間：
當滾動超過100像素時，上面選單就滑出，若要再多一點的話，可自行修改this_Top中的數值，若要改變上選單高度時，再修改top:後方的數值即可。

<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>

HTML：
放在<body>.....</body>之間：

<div id="top-bar"></div>
prev CSS的垂直置中,左右置中
製作浮動式的回到網頁頂部按鈕next

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

主選單

會員登入