jquery 实现导航栏置顶跟随窗口滚动

jquery是实现导航跟随滚动最好的方法，之前已经连续分享了几篇：

1、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端

2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码

3、jQuery 导航菜单、广告 —— 固定、置顶、跟随

今天再来分享一个：

这个实现方法也是比较简单，都采用jquery：

!doctype html>
    html>
    head>
    meta charset="utf-8">
    title>
    jquery 实现导航栏置顶跟随窗口滚动/title>
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    /script>
    style>
*{
    margin: 0;
    padding: 0;
    text-align: center;
}
.mainavi{
    text-align: center;
}
    /style>
    /head>
    body>
    br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1div class="mainavi">
    222222222222222/div>
    br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1br>
    1script>
(function ($) {
    $.fn.smohanfixednav = function (mtop, zindex) {
            var nav = $(this),        isIE6 = 'undefined' == typeof(document.body.style.maxHeight),        mtop = mtop,        zindex = zindex,        dftop = nav.offset().top - $(window).scrollTop(),        dfleft = nav.offset().left - $(window).scrollLeft(),        dfcss = new Array;
        dfcss[0] = nav.css("position"),        dfcss[1] = nav.css("top"),        dfcss[2] = nav.css("left"),        dfcss[3] = nav.css("zindex"),        $(window).scroll(function (e) {
                $(this).scrollTop() >
 dftop ? isIE6 ? nav.css({
                position : "absolute",                top : eval(document.documentElement.scrollTop),                left : dfleft,                "z-index" : zindex            }
) : nav.css({
                position : "fixed",                top : mtop + "px",                left : dfleft,                "z-index" : zindex            }
) : nav.css({
                position : dfcss[0],                top : dfcss[1],                left : dfcss[2],                "z-index" : dfcss[3]            }
)        }
)    }
}
    )(jQuery)/script>
    script type="text/javascript">
$(document).ready(function(e) {
    $('.mainavi').smohanfixednav(0,999);
}
    );
    /script>
    /body>
    /html>
    

这个实现导航菜单跟随窗口的方法，需注意CSS变化，JS中采用了position的方法！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！