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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 1:03:54 共计：3595 浏览

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>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<div class="mainavi">222222222222222</div>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
<script>
(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的方法！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：[前端新手必看]HTML、CSS常用单词汇总_CSS学习 | ·下一条：Jquery制作左侧浮动层滚动时跟随页面滚动_js/jQuery