屏幕滚动到页面某个位置，导航栏固定顶部功能。临近值闪烁问题解决办法

最新推荐文章于 2023-11-18 11:58:21 发布
最新推荐文章于 2023-11-18 11:58:21 发布
阅读量2.3k 收藏 2
点赞数 2
分类专栏： CSS JavaScript 文章标签： 导航固定顶端 页面滚动到某个位置固定 固定导航 页面闪烁
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu17310133443/article/details/98639604
版权

在前端开发中，又是会遇到实现页面中有个导航栏，页面滚动到导航栏位置时，导航栏固定在顶部。滚动回去，导航栏再恢复到页面中。

我们需要获取 :

1. 导航栏在页面中距离窗口顶部的高度 top

2. 时刻检测窗口滚动的高度 scrollTop

当 scrollTop >= top时 说明页面已经滚动到导航的位置了，这时候使用给导航添加个class

然后设置导航position:fixed 再页面的顶端。

 

但是实现之后可能会发现一个问题，再导航固定的这个值的边缘，上下滚动页面，会出现闪烁的情况。

我这里的解决办法是，再dom中添加一个一模一样滚动再顶部的导航，先设置隐藏

当页面滚动到导航的位置的时候，设置显示出来，这样就可以防止导航闪烁的问题。

如果你也遇到这个问题，还没有找到好的办法，可以试一试哦！！

Mickey_于浩
关注
专栏目录
滚动页面，实现导航栏固定在顶部（吸顶效果）
weixin_43772742的博客
05-13 1878
利用position的sticky属性 position: sticky; position: -webkit-sticky; // 兼容 -webkit 内核的浏览器 top: 10px; // 必须设一个值，否则不生效 万能方式处理 思路：前提时需要监听scroll事件 1）滚动条不动时，是静态相对定位状态relative 2）当页面滚动超出设置距离时，js改变样式属性 切换定位状态变成fixed，同时再给top设置一个值 css部分
跟随屏幕滚动后固定导航到顶端
zerlinda_c的博客
12-30 1万+
在浏览网站的时候看到许多不错的效果，比如导航栏滚动一定距离后固定到某一位置。最近做手机端的页面比较多，就想如果多个导航栏叠加能否也将导航栏固定在不同位置呢？其实代码很简单，只不过是一个思路，看一下实际效果： 　　　　　　　　 　　　　　　　　　　　　 　　思路很简单，首先将页面整体结构确定下来，最外层套一个div是常识，然后就是导航和内容的分离。由于html整个文档默认从上到下渲染，而我们
滑动鼠标，固定导航栏一直闪烁
qq_43654065的博客
05-14 582
需求：当页面滚动距离大于某一值时，导航栏固定在页面顶部。向上滑动，当滚动距离小于某一值时，导航回到原位置。 问题：每次向下滑动鼠标，固定导航栏一直闪烁。 怀疑： 获取导航栏位置时，不要在scroll事件里获得，在scroll事件外获得。因为在滚动鼠标时，一直在实时查询，导致闪烁。 本来的导航栏在滚动距离大于某一值时，该导航栏直接设置了display：none，元素直接不见了，获取的页面高度就需要重新减去这个元素高度，从而导致闪烁。建议页面本来的导航栏和固定导航设置成两个div，当高度大于某一值时，本来的导
前端页面滚动时固定导航栏
HWJBJ的博客
08-06 2733
vue + vant 1、如果导航栏就在顶部时，只需样式固定在顶部就好 2、但是想要固定的部分，不在导航栏，需要页面滚动到导航栏时固定，划回去的时候又不要固定时，可参考以下代码 Video_2021-08-06_102128 html部分 <!-- 上面有一些其他显示的东西--> <div id="yj_bot"> <!-- 需固定区--> &
导航栏因滚动条隐藏/显示而产生晃动
qq_29603991的博客
03-11 925
问题：运用antd的Modal对话框开发时，在页面中点击按钮，弹出框出现后，默认给body添加了overflow:hidden;导致页面固定导航栏宽度有所改变，页面发生晃动。 问题截图： 原始样式 点击按钮后： 右边的滚动条消失，顶部导航栏被“拉开”。 而查看知乎的主页却没有上述问题，导航栏不会随滚动条的消失而被拉开。 解决办法：考虑动态给导航栏动态设置宽度，在生命周期中监...
js来控制导航栏在滚动条拉到一定位置时显示
jingtian678的博客
12-19 1998
&lt;html&gt; &lt;head&gt;     &lt;title&gt;test&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;div style="position: fixed; height: 200px; background: red; width: 100%; display: none" id="
导航栏滚动到顶部后固定
07-16
1. 占用空间：固定导航栏始终占用屏幕顶部的空间，可能会影响页面的可读性和视觉效果。 2. 移动端适配：在小屏幕设备上，固定导航栏可能导致页面内容显示不全，需要考虑响应式布局。 六、实际应用与扩展 在实际项目...
uni-app 导航栏滚动后固定到顶部
qq_59795720的博客
05-27 2949
完整代码 <template> <view class="content"> <view class="wrap"> <view class="list" v-for="i in list_data"> <text>{{ i }}</text> </view> </view> ...
jq导航栏点击滚动到对应位置 导航栏随页面滑动变化对应导航颜色
qq_35606790的博客
06-14 4117
需要做个手机站，顶端有导航栏，点击导航栏页面滑到相应位置，并且滑动页面，导航栏也随之变化。由于不大会js，只能网上找了些代码，但是都不完全适用，就自己改造了一番，写的比较粗糙，但是对初学者来说，算是比较好懂 $(function () { var cont1 = $("#yswy").offset().top - 100;//获取模块距页面顶部的距离，由于有固定定位的导航栏，所以减100 va...
使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
热门推荐
Love.Hope.Faith
12-20 1万+
如题。         《1》         我们经常会实现一种效果，这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部，有时候在侧边。实现的方法非常简单，只需要通过CSS进行元素的控制。         要点有：position:fixed;通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。         基本上对这两个
浏览器滚动到一段距离，绝对定位的导航出现
沫沫酱
01-22 3644
具体效果是，浏览器滚动到一定距离的时候，fixed绝对定位的导航会显示，当滚动到小于这个距离的时候，导航会隐藏。 js部分：     function getTop() {         var mytop = $(document).scrollTop();         if (mytop > 400) {             $(".fixed_bann
实现滚动到一定位置时，导航栏置顶的效果
xiao白的博客
04-16 4474
告别js用css实现滚动到一定位置时，导航栏置顶的效果。 <div class="nav">这里是导航栏所在的DIV容器。</div> css代码： .nav{ position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */ top:0; /* 距离窗口顶部距离 */ left:0; /* 距离窗口左边的距离 */ ...
html永远在屏幕的,滚动屏幕导航条永远在顶部.html
weixin_28559803的博客
06-29 226
无标题文档*{padding:0; margin:0;}.top{width:100%; height:120px; background:orange;}#nav{width:100%; height:50px; background:red;}.dingwei{position:fixed; top:0;}/*window.onscroll=function(){var oHeight=doc...
vue项目--导航栏固定：实现页面滑动到相应位置导航栏有相应选中效果；点击导航栏跳转到对应位置；
最新发布
m0_73347282的博客
11-18 1055
【代码】导航栏固定-实现页面滑动到相应位置导航栏有相应选中效果-点击导航栏跳转到对应位置。
html出现滚动条页面闪动,div固定在顶部的时候，滚动滚动条会闪烁
weixin_36377785的博客
06-03 1214
已搞定；原因在滚动条在滚动的时候parseInt($(".wrap .left").offset().top)+parseInt($(".wrap .left").css('height'))/3在不断进行计算，所以就会滚动的时候在进行闪烁附上修改后的代码：.wrap{margin: 0 auto;border: 1px solid #ccc;width: 1000px;height: 500px...
获取滚动条距顶端的距离
weixin_49563231的博客
06-14 941
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>11111111111111111</p> <p>11111111111111111</p> <p>11111111111111111</p>.
android 滑动顶部布局停留
09-21 2240
看过很多不错的布局停留效果，代码思路差不多，整合了一下项目里的技术点，提出了这个功能。为的是纪录起来，怕哪天自己忘记了 这个功能以前看起来跟高大上，以为又是onLayout,invalidate 等等去解决，果断做了伸手党 最近捡起来看了下，其实发现只需要用动画就可以了。 这个顶部停留的layout 其实可以写在你的list层，不过被隐藏了，当items 滑动到顶部消失不见时，让它visi
table 固定表头 显示滚动条
xzx66666的博客
08-18 243
table 固定表头 显示滚动条
拖动滚动条，保持表头固定的HTML写法
baidu_34217927的博客
05-31 1372
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt; &lt;/script&gt; &lt;style&gt; .bg{ width:430px; overflow-x: scroll; position: relativ
实现滚动页面导航栏固定在顶部
06-11
首先，在导航栏的CSS样式中设置position为fixed，top为0，这将使导航栏固定在页面顶部。 ```css nav { position: fixed; top: 0; width: 100%; } ``` 然后，在JavaScript中添加一个事件监听器，监听页面滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mickey_于浩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值