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

【问题标题】：Show and hide a div when element isin-viewport当元素在视口中时显示和隐藏 div
【发布时间】：2015-02-06 23:14:28
【问题描述】：

当<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

谢谢

【问题讨论】：

1) 你在用这个吗？ appelsiini.net/projects/viewport 我从来没有听说过 :in-viewport 所以我假设你是。 2）您的问题很奇怪，您想在元素位于视口之外时隐藏它，即它无论如何都不可见？这是正常的浏览器行为。用户如何知道元素是隐藏的？或者您可能打算将它们淡入/淡出。
是的，我使用的是 viewport.js。事实上，情况恰恰相反。在视口内隐藏，在视口外显示。
我改了问题。
好的，但是在您的页面中，当前既不存在 .waar 也不存在 .sticky-info。可能需要一些基本的 html 和 css，但我会创建一个 jsfiddle 进行测试。
OK 看这里：jsfiddle.net/lharby/3c5w0gbs 你可以添加和编辑这个小提琴并更新版本。我认为您将遇到的一个问题是，如果您有多个 .waar 或 .sticky-info 实例，那么您需要定位其中一个实例。即 $(this);

标签： javascript jquery

【解决方案1】：

您的 if 语句将始终为真。 $('.waar:in-viewport') 会返回一个 jQuery 对象，是否为空，没关系，它是一个真实的值。

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

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

注意：这假设您的插件支持与原生 jQuery 伪选择器相同的功能..

【讨论】：

是的，这行得通。你的代码在这里工作：jsfiddle.net/lharby/3c5w0gbs/7 我快疯了，因为它总是返回 true。