• slider image 145
  • slider image 140
  • slider image 142
  • slider image 143
:::

Empty Title

 

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>

:::

會員登入