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

你家隔壁程序猿 11-27 603

前言：

此时我们对“jquery浮动窗口插件”大约比较讲究，朋友们都想要分析一些“jquery浮动窗口插件”的相关内容。那么小编同时在网上汇集了一些关于“jquery浮动窗口插件””的相关知识，希望咱们能喜欢，兄弟们快快来了解一下吧！

在一些场景中，我们需要实现这样的场景：当网页滚动距顶部一定高度时某个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 事件时运行的函数。