您的位置 首页 > 娱乐休闲

使用jQuery滚动事件实现网页滚动一定高度时隐藏或者悬浮某个div

在一些场景中,我们需要实现这样的场景:当网页滚动距顶部一定高度时某个div隐藏或者悬浮展示。可以通过jQuery滚动事件,结合jQuery操作CSS类的相关函数,实现此类场景。

比如,这有一个文章专题页面,左侧是专题板块,属于锚点链接,右侧是一些文章板块的堆积,页面高度经常会超出了显示器的可视高度,需要滚动或者点击锚点进行好看,往下滚动时左侧板块导航也就随着往上走,就需要将板块始终展示在浏览器可使区域内,代码如下:

这里我使用了Layui前端框架,关于layui框架的使用,请参考《推荐一款优秀的模块化UI框架-Layui》。

timeline-fixed类的css代码为:

.timeline-fixed{ position: fixed; width: 260px; top: 40px; }

主要是用了jQuery操作CSS类的相关函数和滚动scroll事件:

1、addClass() - 向被选元素添加一个或多个类;

2、removeClass() - 从被选元素删除一个或多个类;

3、scroll事件适用于所有可滚动的元素和 window 对象(浏览器窗口),scroll() 方法触发 scroll 事件,或定义当发生 scroll 事件时运行的函数。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“使用jQuery滚动事件实现网页滚动一定高度时隐藏或者悬浮某个div”边界阅读