滚动固定导航

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>