PC端侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

PC端侧边栏下滑即将越过时动态固顶与上滑恢复

所属分类: WEB
专题标签: Jquery 动态 布局

诉求说明

网站为了提升内容曝光率或聚合咨询,经常设计为二栏或者三栏布局。
下图为常见的二栏的网站布局示意图:

除了正文区域外的侧边栏为了更多的聚合网站内容,增加用户兴趣以提升用户黏性。
一般情况下侧边栏的长度是固定的,指定数量的信息列表等等。
如果侧边栏过长,正文过短则会使正文下方出现大面积空白,所以通常侧边栏都相对较短。
而通常正文的长度是不可预知的,或者是无法通过指定长度限制的。
如果正文较短,侧边栏长一点点的话还能够说的过去。
如果正文过长,当用户下拉阅读时就会感觉侧边栏区域非常空旷,体验不友好。
示意效果如下:

因此侧边栏动态固顶变得很有必要。
很多时候网站的侧边栏长度高于屏幕,如果全部固顶必然导致侧边栏靠下的内容无法展示。
因此我们可以选择侧边栏最后一个或多个元素为固顶的元素。
并实现滚动条滑动到元素所在位置进行固顶,返回越过初始位置则恢复原位置。
效果可参考本站的效果,当然本站的呈现更为复杂,固底、FLEX底轴、FLEX顶轴三种情况动态切换。
我们更多需要了解一个实现思路。

DEMO代码&注释

一个简单的DEMO,我们选择id=”fixed_box”的元素作为滑动固顶元素。
为了明显区分各个元素,米虫使用不同的背景色。
该效果只有屏幕宽度超过1000px才会生效,因为对于手机端或其他移动端而言,侧边栏固顶没有必要。
可以全文COPY本代码至一个空的HTML文件中体验。
实现动态固定的原理主要是计算当前滚动的位置,替换需要固顶元素的position属性来达成动态效果。
实现核心:Jquery的scroll()
相关文章:Jquery+CSS轻松实现导航动态显示隐藏(无需三方插件)

  1. <html lang="zh_CN">
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>滑动指定元素位置侧边栏固定及恢复 - 米虫先生</title>
  7. <meta name="keywords" content="米虫,前端,DEMO">
  8. <meta name="description" content="滑动指定元素位置侧边栏固定及返回原位置恢复的DEMO">
  9. </head>
  10. <body>
  11. <style>
  12. body{
  13. width:1000px;
  14. margin:0 auto;
  15. font-size:24px;
  16. text-align:center;
  17. color:#fff;
  18. line-height:50px;
  19. }
  20. .left{
  21. height:1500px;
  22. width:700px;
  23. float:left;
  24. background:black;
  25. }
  26. .right{
  27. float:left;
  28. }
  29. .right_box{
  30. width:300px;
  31. height:300px;
  32. }
  33. </style>
  34. <div class="left">
  35. <br><br><br>正文区域<br><br><br>
  36. <br><br><br>正文区域<br><br><br>
  37. <br><br><br>正文区域<br><br><br>
  38. <br><br><br>正文区域<br><br><br>
  39. <br><br><br>正文区域<br><br><br>
  40. </div>
  41. <div class="right">
  42. <div class="right_box" style="background:green;">
  43. <br><br>该区域不浮动<br><br>
  44. </div>
  45. <div id="fixed_box" class="right_box" style="background:blue;"> <br>达到区域需要浮动<br>
  46. 返回恢复位置<br>
  47. 浮动主要针对PC<br>
  48. 手机不需要浮动<br>
  49. </div>
  50. </div>
  51. <!-- 加载Jquery -->
  52. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script>
  53. //获取屏幕宽度
  54. var width = $(window).width();
  55. if(width>1000) {
  56. //需要悬浮元素距离顶部的距离
  57. var oTop = $("#fixed_box").offset().top;
  58. //当前滑动距离
  59. var sTop = 0;
  60. //当滑动时触发
  61. $(window).scroll(function() {
  62. //实时滑动距离
  63. sTop = $(this).scrollTop();
  64. //越过元素,悬浮
  65. if(sTop >= oTop) {
  66. //此处可以通过指定一个class的方式实现样式浮动
  67. //通过CSS3特性还可以实现一些Class叠加后的动态线性变化
  68. $("#fixed_box").css({"position":"fixed","top":"0"}); }else{
  69. //高度低于原始值,恢复原始样式
  70. $("#fixed_box").css({"position":"static"});
  71. }
  72. });
  73. }
  74. </script>
  75. </body>
  76. </html>