滚动固定导航

来源:互联网 发布:细说php第二版视频教程 编辑:程序博客网 时间:2024/06/10 06:50

html

<header></header><ul></ul>

css

*{margin: 0;padding: 0;}header{height: 50px;width:100%;background:#ddd;position: relative;top: 0;z-index: 999;left: 0;}.ofixednav{position: fixed;top: 0;left: 0;}

js

<script type="text/javascript" src="jquery.js"></script><script>    var oUl=document.getElementsByTagName('ul')[0];    for(var i=0;i<200;i++){        oUl.innerHTML+='<li>'+i+'</li>';    }   $(function(){    $(window).scroll(function(){        if($(window).scrollTop()>=50){            $('header').addClass('ofixednav');        }else{            $('header').removeClass('ofixednav');        }    })   })</script>
0 0
原创粉丝点击