需求及使用场景

想要实现侧边栏中的某个元素滚动到顶端后固定,滚动到初始位置后取消固定的效果。

代码实现

需要用到jquery,具体实现思路见如下代码。

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="application/javascript">

    $(function () {
        // 选择器,选择需要设置的元素
        var elm = $('#tag-widget'); 

        // 获取元素到浏览器窗体顶部的偏移量
        var startPos = $(elm).offset().top; 
        // 增加鼠标滚动触发的方法
        $.event.add(window, "scroll", function () {
            // 获取元素当前到浏览器窗口顶部的偏移量
            var p = $(window).scrollTop();
            // 判断如果当前偏移量>初始偏移量
            if ((p) > startPos) {  //to Top
               // 设置position属性为fixed
                $(elm).css('position', 'fixed');
                $(elm).css('top', '0px');
                $(elm).css('width', $('#secondary').width()); 
                $(elm).css('background', '#fff');   
       
     
            } else { //复原
                $(elm).css('position', '');
         

            }

        });
    });
</script>

标签: 实践

分享到: