javascript - 当元素滚动到屏幕顶部附近时触发的监听器？

Question

我想让一个元素始终可见，即使它应该被用户滚出。

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

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

基本上，当元素距离顶部小于 20px 时，我想将其位置更改为固定 (2)，而当它距离顶部超过 20px 时，我想将其位置更改回静态 (1)。

有些插件可以像 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 操作