jquery实现固定导航栏

最新推荐文章于 2025-05-28 18:06:03 发布

原创最新推荐文章于 2025-05-28 18:06:03 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何结合HTML、CSS和jQuery技术，实现网页中头部导航栏的固定定位效果，确保用户滚动页面时导航栏始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<body>
    <div class="top" id="topPart">
        <img src="images/top.png" alt="">
    </div>
    <div class="banner" id="bannerPart">
        <img src="images/barnner.png" alt="">
    </div>
    <div class="main" id="mainPart">
        <img src="images/main.png" alt="">
    </div>
</body>

CSS

*{
    padding: 0;
    margin: 0;
}
.top{
    vertical-align: top;
}
.main{
    width: 1000px;
    margin: 0 auto;
    padding-top: 10px;

}
.fixed{
    position: fixed;
    top: 0;
    left: 0;
}

jquery

 <script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
            // 判断卷去的高度超过topPart的高度
            // 1.让bannerPart有固定定位
            // 2.让mainPart有一个magin-top
            $(window).scroll(function () {
               if($(window).scrollTop()>=$(".top").height()){
                   $(".banner").addClass("fixed");
                   $(".main").css("marginTop",$(".banner").height()+10);
               } else {
                   $(".banner").removeClass("fixed");
                   $(".main").css("marginTop",10);
               }
            });
        });
    </script>