Question

我希望一个元素始终可见，即使它应该由用户滚动出来。

1) On Body Load                     2) After scrolling down
-------------------------           -------------------------
                                     ____________
                                    |            |
                                    |            |
                                    |            |
                                    |            |
                                    |____________|

 ____________
|            |
|            |
|            |
|            |
|____________|

基本上我想要将元素的位置从顶部（2）小于20px时将其位置更改为固定位置，并将其位置从顶部（1）远远超过20px时将其位置更改为静态。

有一些插件像E.G：http://www.vertstudios.com/blog/demo/stickyscroller/demo.php那样可以做到这一点，但如果手动不太难，我宁愿避免使用它们。

如何创建一个在元素靠近顶部时触发的侦听器以及在远离顶部时触发的侦听器？

Answer 1

需要一个css类和规则来修复该类。如果没有应用类，你的普通css会设置绝对值

 var $div = $('#mydiv');
$(window).on('scroll', function() {       
      var  changeClass = false,
        is_fixed = $div.hasClass('fixedClass');

    if ($(this).scrollTop() > 20) {
        changeClass = is_fixed ? false : true;
    } else {
        changeClass = is_fixed ? true : false;
    }
    if (changeClass) {
        $div.toggleClass('fixedClass');
    }

})

可以用更短的代码编写这个，但由于滚动触发事件每秒多次，检查类是否已经存在或者不会删除大量额外的操作DOM

当元素在屏幕顶部附近滚动时触发的侦听器？

1 个答案: