一款右侧粘性元素插件jquery.sticky.js

2022-03-17 709 0

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

相关文章

Redmi K50 Ultra OS 1.0.8.0.ULFCNXM 官改
如何使用WatchOS Pro在本地开启
如何解决小米电脑管家无法使用教程
随身wifi 中兴mf761w/f.f231zc全功能后台修复频段显示
关于手机刷机和Root权限的一些杂谈
Win11新电脑2024最新优化项目设置

发布评论