當元素處於視口中時顯示並隱藏div

當<span class="waar">位於視口中時，我想<div class="sticky-info">隱藏。當<span class="waar">離開視口時，我想要<div class="sticky-info">隱藏。當元素處於視口中時顯示並隱藏div

第一部分隱藏<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

來源

2015-02-06 MDC

1）是否使用此？ http://www.appelsiini.net/projects/viewport我從來沒有聽說過：在視口中，所以我認爲你是。 2）你的問題很奇怪，你想隱藏一個元素，當它在視口之外時，即它不可見？這是正常的瀏覽器行爲。用戶如何知道該元素是隱藏的？或者你可能打算淡入淡出。 – lharby 2015-02-06 13:45:06

是的，這是我使用的viewport.js。實際上，這是相反的。在視口中隱藏時，顯示何時出視口。 – MDC 2015-02-06 13:55:01

我改變了問題。 – MDC 2015-02-06 14:17:31

你的if語句將永遠是正確的。 $('.waar:in-viewport')會返回一個jQuery對象，是否爲空，沒關係，它是一個真值。

我相信你正在尋找的是.is()：

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

注：這是假設你的插件支持相同的功能原生的jQuery僞選擇..

來源

2015-02-06 15:14:28 George

是的，這是有效的。你的代碼在這裏工作：http://jsfiddle.net/lharby/3c5w0gbs/7/我真的很生氣，因爲它總是迴歸真實。 – lharby 2015-02-06 15:16:40

Thx George＆lharby這工作正常。 – MDC 2015-02-06 15:34:05

當元素處於視口中時顯示並隱藏div

回答

相關問題