jQuery实现真正的侧边栏随窗口滚动,题目之所以加上真正的几个字,是因为找这段自己想要的代码实在是不容易。看到很多资料,很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。
题目之所以加上真正的几个字,是因为找这段自己想要的代码实在是不容易。看到很多资料,很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。
方法一:
最初想到的当然是前端大咖bootstrap。bootstrap提供了一个affix的插件功能。这个affix可以允许该模块在拖动滚动条的时候把新的样式赋予模块,核心就是把该元素position给fixed。然而这样会产生出一个问题。当sidebar宽度超出后,会重叠到右侧主题内容。还有一个问题,当你用到其他设备查看的时候,sidebar将会漂浮在页面上,非常难看。所以这种方法不是我想要的。
方法二:
多方查找,终于有了收获。核心思想就是监听滚动来判断事件,监听滚动位置来分支操作。通过停止和动画来处理最后想要的位置。于是利用JQuery就有了下述代码:
step1: 引入jquery
setp2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script> |
上述方法能够完美解决这个问题。但是又有了新的问题。如果换用其他设备,当sidebar占据整个宽度的时候,那么会导致sidebar一直占据顶端,下拉后看不到正文。所以笔者又改变了其中一部分代码,根据当前文档宽度再判断一次,是否增加此操作。
最终代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> $(function() { var $sidebar = $("#roll"), $window = $(window), offset = $sidebar.offset(), topPadding = 100; $window.scroll(function() { if ($(document.body).width() > 768){ if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } } }); }); </script> |
原创文章,作者:ifyoung,如若转载,请注明出处:https://www.drugfoodai.com/jquery-scroll.html