jquery.sticky.js

一个简单的jQuery扩展，使任何HTML元素在滚动上具有粘性。

GitHub地址：jquery.sticky.js

图示：

JS

<script>$(function(){// sticksy domvar fun_sticksy =function(){// offsetY（数字）- 额外的垂直偏移量。default: 0// outerWidth（布尔值） - 是使用元素的外宽还是正常宽度。default: false// zIndex（数字） - 使粘性元素与其他元素重叠。default: 99// cssClass（字符串） - 要应用于滚动上的粘滞元素的自定义 CSS 类。default: element-stickyvar win_width = $(window).width();if ( win_width <= 992) {//窗口小于992px 销毁·粘性jQuery('.d-right').sticky('destroy');return false;}else{jQuery('.d-right').sticky({offsetY: 90,outerWidth: true});return true;}}fun_sticksy();});</script>

CSS

  .d-left{height: 250px;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);background: grey;}.d-right{.widget{height: 200px;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);background: grey;}}

bootstrap4布局为例： 

<div class="container"><div class="row pt-3"><div class="col-12 col-xl-8">                          <div class="d-left"><h1>8</h1></div><div class="d-left"><h1>8</h1></div><div class="d-left"><h1>8</h1></div></div><div class="col-12 col-xl-4"><aside class="d-right"><div class="widget"><h3> STICKY 4</h3></div><div class="widget js-sticky-widget"><h3> STICKY 4</h3></div></aside></div></div>
</div>
</div>