jQuery实现在鼠标滚动后导航栏保持固定

最新推荐文章于 2024-08-23 11:08:15 发布

jqdfTiTan

最新推荐文章于 2024-08-23 11:08:15 发布

阅读量8.8k

点赞数 4

分类专栏： JQuery 文章标签： jquery 导航

本文链接：https://blog.csdn.net/m0_37935476/article/details/77881438

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：鼠标向下滚动后，导航栏在屏幕上置顶固定。

下滚后，

HTML：

<div id="navi">  
    <ul id="nav">  
        <li><a href="home">首页</a></li>  
        <li><a href="life">走进航大</a></li>  
        <li><a href="direction">报考指南</a></li>  
        <li><a href="college">学院介绍</a></li>  
        <li><a href="type">招生类型</a></li>  
    </ul>  
</div>

CSS：

.full{ position: fixed;  top: 0;z-index: 10000; width:100%;background-color: #2778af;float:left;height:40px;}
.fixed{ position: fixed;  top: 0;  width: 1215px !important;left: 0;right:0; margin:auto !important;  z-index: 10000; background-color: #2778af ;float:none !important; }

JQuery：

<script>
        $(document).ready(function() {
            var navOffset=$("#nav").offset().top;
            $(window).scroll(function(){
                var scrollPos=$(window).scrollTop();
                if(scrollPos >=navOffset){
                    $("#nav").addClass("fixed");
                    $("#navi").addClass("full");
                }else{
                    $("#nav").removeClass("fixed");
                    $("#navi").removeClass("full");
                }
            });

        });
</script>

每日吃超过十块的盖饭都会考虑好久

却心系宇宙从哪来到哪去的普普通程序员

2017.9.7