當元素在視口中時顯示和隱藏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偽選擇器相同的功能。