Question

我有一个粘性元素，需要识别它何时通过另一个元素才能从屏幕上消失。

这是应该消失的元素：

.sticky-footer
    .container
        .row.sticky-row
            .col-xs-6
                // text
            .col-xs-6
                // text

当用户向下滚动并且它遍历此元素时：

hr#line-before-related-article

有没有办法用css或jQuery做到这一点？

Answer 1

您可以收听每次滚动页面时触发的事件，然后检查其位置是否超过了您的hr＃line-before-related文章。

以下是一个例子：

$(window).on('scroll', function() {

    if ($(this).scrollTop() + $(this).height() >= $('#line-before-related-article').position().top) {

        $('.sticky-footer').hide();

    } else if ($('#line-before-related-article').position().top >= $(this).scrollTop()) {

        $('.sticky-footer').show();
    }
})

如果你想要一些性能更高的东西，你可以使用一种称为去抖功能的东西......

对于那些不了解去抖函数的人，它会限制函数可以触发的速率。一个简单的例子：你在窗口上有一个调整大小的侦听器，它执行一些元素维度计算和（可能）重新定位一些元素。这本身并不是一项繁重的任务，但在经过多次调整后会反复被解雇，这会让你的网站变慢。为什么不限制功能可以触发的速率？

有关此内容的更多信息：https://davidwalsh.name/javascript-debounce-function

有没有办法知道元素何时通过另一个元素？

1 个答案: