隨手筆記

CSS 

<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
#top-bar{
width:100%;
height:100px;
background:#00ff00;
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>

Javascript

<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>     //注意jquery文件位置
<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){  //若要網頁一出現即存在，修改此段code
　　　$('#top-bar').stop().animate({top:"-65px"});
　　　}
　　　　if($this_Top > 100){  
　　　　$('#top-bar').stop().animate({top:"0px"});
　　　 }
　　}).scroll();

　});
});
</script>