Question

我希望<div class="sticky-info">在<span class="waar">位于视口中时隐藏。当<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

THX

Answer 1

您的if语句将永远为真。 $('.waar:in-viewport')将返回一个jQuery对象，空或不，它并不重要，它是一个真正的价值。

我相信你要找的是.is()：

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

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

元素isin-viewport时显示和隐藏div

1 个答案: