使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果

最新推荐文章于 2023-10-06 10:22:22 发布

GiantChan

最新推荐文章于 2023-10-06 10:22:22 发布

阅读量1w

点赞数 1

分类专栏： web前端文章标签：导航条滑动到固定位置后固定在顶部

本文链接：https://blog.youkuaiyun.com/killzero/article/details/17451943

版权

本文介绍如何使用Jquery使顶部导航栏在页面滚动到其位置后固定在页面顶部。通过CSS的position:fixed属性和JavaScript实现动态定位，避免页面滚动时对布局造成影响。

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

如题。

《1》

我们经常会实现一种效果，这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部，有时候在侧边。实现的方法非常简单，只需要通过CSS进行元素的控制。

要点有：<1>position:fixed;<2>通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。

基本上对这两个css属性进行设置之后就可以实现上面的效果。

《2》

但是我们在实际操作过程中，如果使得某个元素一直固定在顶部，页面将会受到严重的影响。所以一般我们的做法是让页面滚动到某个合适的位置之后再让其固定住在某个位置或者出现。

本文只讲述顶部导航栏在页面滑动到其位置后固定在页面顶部的方法：

js代码：

<!--实现价格筛选栏在滑动到其位置之后紧贴顶部的js  陈烁斌 2013.12.12-->
    <script type="text/javascript">
           //判断导航栏是否在原来位置上的标志，初始为false
	    var test = false;
	    $(window).scroll(function(){
                //获取当前位置到窗口顶部的高度
                var h_num=$(window).scrollTop();
                if(h_num>980){//当当前高度大于导航条到窗口顶部高度
                   //切换导航条的类名为固定后的类名
                   $('.

最低0.47元/天解锁文章