jquery.sticky.js

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

GitHub地址：jquery.sticky.js

html：

<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>

js：

<script>
    $(function(){
    // sticksy dom
    var fun_sticksy =function(){
    // offsetY（数字）- 额外的垂直偏移量。default: 0
    // outerWidth（布尔值） - 是使用元素的外宽还是正常宽度。default: false
    // zIndex（数字） - 使粘性元素与其他元素重叠。default: 99
    // cssClass（字符串） - 要应用于滚动上的粘滞元素的自定义 CSS 类。default: element-sticky
    var 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;
        }
    }