jquery实现滚动条到一定高度导航固定不变跟随效果方法说明：

<script type="text/javascript">
var rollSet = $('#widget');
    var offset = rollSet.offset();
    var fwidth = $("#footer").height();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
        if (offset.top < scrollTop) {
            if (scrollBtm > fwidth) {
                rollSet.removeClass('absolute').addClass('fixed')
            } else {
                rollSet.removeClass('fixed').addClass('absolute')
            }
        } else {
            rollSet.removeClass('fixed')
        }
    })
</script>

<div class="one"></div>

.one {
width: 800px;
height: 100px;
background-color: yellow;
}

.fix {
position: fixed;
left: 0;
top: 0;
background-color: pink;
}

 

$(function(){

var nav=$(".one"); //得到导航对象

var win=$(window); //得到窗口对象

var sc=$(document);//得到document文档对象。

win.scroll(function(){

if(sc.scrollTop()>=600){

nav.addClass("fix");
}else{

nav.removeClass("fix");
}

});
});

方法三(建站常用代码实例)：

 <div id="navtop">顶部文字</div>

<div class="bgwhite marginb fixed" id="navBar">
导航
</div>
<div id="mainPart"></div>
<div>内容</div>

<script type="text/javascript">
$(window).scroll(function(){
    function e(){return{left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0}}
    var r=$("#navtop"),o=$("#navBar");
    if(0===r.length||0===o.length)return!0;
    var a=e();
    if(a.top>=r.height()){
        o.removeClass("marginbs").addClass("fixed");
     var s=a.top-r.height();s=s>66?66:s,s+=66,$("#mainPart").attr("style","padding-top: "+s+"px;")
    }else{
        o.removeClass("fixed").addClass("marginbs"),$("#mainPart").attr("style","padding-top: 0;")
    }
})
</script>

• jquery
• 滚动条