1. AI新视界首页
  2. AI经验分享
  3. 编程语言

jQuery实现真正的侧边栏随窗口滚动

jQuery实现真正的侧边栏随窗口滚动,题目之所以加上真正的几个字,是因为找这段自己想要的代码实在是不容易。看到很多资料,很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。

题目之所以加上真正的几个字,是因为找这段自己想要的代码实在是不容易。看到很多资料,很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。

方法一:

最初想到的当然是前端大咖bootstrap。bootstrap提供了一个affix的插件功能。这个affix可以允许该模块在拖动滚动条的时候把新的样式赋予模块,核心就是把该元素position给fixed。然而这样会产生出一个问题。当sidebar宽度超出后,会重叠到右侧主题内容。还有一个问题,当你用到其他设备查看的时候,sidebar将会漂浮在页面上,非常难看。所以这种方法不是我想要的。

方法二:

多方查找,终于有了收获。核心思想就是监听滚动来判断事件,监听滚动位置来分支操作。通过停止和动画来处理最后想要的位置。于是利用JQuery就有了下述代码:

step1: 引入jquery

setp2:

上述方法能够完美解决这个问题。但是又有了新的问题。如果换用其他设备,当sidebar占据整个宽度的时候,那么会导致sidebar一直占据顶端,下拉后看不到正文。所以笔者又改变了其中一部分代码,根据当前文档宽度再判断一次,是否增加此操作。

最终代码:

 

原创文章,作者:ifyoung,如若转载,请注明出处:https://www.drugfoodai.com/jquery-scroll.html

发表评论

邮箱地址不会被公开。 必填项已用*标注