2

我想保持一个元素始终可见，即使它应该由用户滚动出去。

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

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

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

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

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

4

1 回答 1

0

将需要一个 CSS 类和规则来固定该类。如果未应用类，则您的普通 css 将设置为 absolute

 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 操作

于 2012-06-19T05:04:35.753 回答