js要引入jquery文件:
<script type="text/javascript"> $(function(){ var nav=$("#header"), //得到导航对象 win=$(window), //得到窗口对象 doc=$(document);//得到document文档对象。 //防止页面滚动到60px以下F5刷新后导航不显示 if(doc.scrollTop()>=60){ $('#header').addClass('fixnav'); }else{ $('#header').removeClass('fixnav'); } //滚动到60px以下导航显示 win.scroll(function(){ if(doc.scrollTop()>=60){//判断滚动的高度 $("#header").addClass('fixnav');//固定导航样式类名 }else{ $("#header").removeClass('fixnav'); } }) }) <script>
然后在css文件里面增加这个属性(其他一些样式自行添加):
.fixnav { position: fixed; top: 0px; left: 0px; 100%; z-index: 999; }