是否有一种方法可以知道一个元素何时通过另一个元素？

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#行之前的相关文章。

下面是一个例子：

$(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