当元素处于视口中时显示并隐藏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

回答

相关问题