使用jQuery实现页面下滑时顶部导航栏固定跟随页面滚动

模板制作 2024-04-19 16:48:13 1

无需魔法，免费体验ChatGPT-4 / MJ绘图等AI大模型！AI问答、写文案、做表格、绘图、写脚本、写代码...

现在很多建站公司或工作室都是使用模板去建站，为了更符合客户的需求难免遇到一些小的改动。今天给大家分享一下如何使用jQuery实现页面下滑时，实现网站的头部区域或网站导航栏固定跟随页面滚动效果。如下图：

导航跟随页面滚动

实现思路：

可以通过使用jQuery来监听页面的滚动事件，然后动态的添加或移除sticky类，改变导航栏的样式或者位置来实现。

代码示例：

HTML代码示例：

<nav id="top-nav">  
    <!-- 导航栏内容 -->  
</nav>  
<main>  
    <!-- 页面主要内容 -->  
</main>

调试建议：可直接在要实现跟随滚动的区域，外部div中加入id="top-nav"

CSS代码示例：

#top-nav {  
    position: relative; /* 或者 static，默认就是 static */  
    /* 其他样式 */  
}  
  
#top-nav.sticky {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    z-index: 9999; /* 设置一个较高的z-index值，确保导航栏在最上层 */ 
    /* 其他样式 */  
}

调试建议：如果希望导航栏在页面滚动时始终保持在最上层，可以通过给导航栏设置一个较高的 z-index 值来实现。

jQuery代码示例：（确保页面中引入了jQuery库）

<script>
$(window).scroll(function() {  
    var scroll = $(window).scrollTop();  
      
    if (scroll >= 100) { // 当滚动条的位置处于距顶部100像素以下时，导航条改变  
        $("#top-nav").addClass("sticky");  
    } else {  
        $("#top-nav").removeClass("sticky");  
    }  
});
</script>

调试建议：当页面滚动超过100像素时，导航栏会变为固定位置（position: fixed），并停留在页面顶部。当页面滚动回顶部时，导航栏会恢复原来的位置（position: relative 或 position: static）。可以根据需要调整这个阈值（在这个例子中是100像素）。