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

Listener that fires when element is scrolled near the top of the screen?

本文关键字：侦听器 元素 滚动 屏幕 顶部      更新时间：2023-09-26

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

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

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

有些插件可以做到这一点，例如：http://www.vertstudios.com/blog/demo/stickyscroller/demo.php 但是如果手动操作不是太难，我更喜欢避免它们。

如何创建一个侦听器，当元素靠近顶部时触发，并在元素远离顶部时触发

？
需要一个

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

相关文章：