当元素在视口中时显示和隐藏div

Question

我希望当<span class="waar">在视口中时，隐藏<div class="sticky-info"> 。 当<span class="waar">离开视口时，我希望<div class="sticky-info">隐藏。

第一部分隐藏<div class="sticky-info">工作正常，但第二部分节目<div class="sticky-info">没有。 也许这确实很愚蠢，但我不是那个JS向导。 这是JS。

<!--sticky info-->
<script type="text/javascript">
$(window).scroll(function() {
    if ($('.waar:in-viewport')) {
        $('.sticky-info').hide();
    } else {
        $('.sticky-info').show();
    }
});
</script>

您可以在此处访问的页面http://www.joets.be/test/joetz/page_vakanties.html

谢谢

Answer 1

您的if陈述将永远为真。 $('.waar:in-viewport')将返回一个jQuery对象，是否为空，没关系，这是一个真实的值。

我相信您正在寻找的是.is() ：

$(window).scroll(function() {
    if ($('.waar').is(':in-viewport')) {
        $('.sticky-info').hide();
    } else {
        $('.sticky-info').show();
    }
});

注意：假设您的插件支持与本机jQuery伪选择器相同的功能。