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

我想在视口中显示时隐藏。离开要隐藏的视口时

第一部分隐藏效果很好，但第二部分显示效果不好。也许这真的很愚蠢，但我不是那个JS巫师。这是JS

<!--sticky info-->
<script type="text/javascript">
$(window).scroll(function() {
    if ($('.waar:in-viewport')) {
        $('.sticky-info').hide();
    } else {
        $('.sticky-info').show();
    }
});
</script>

您可以在此访问的页面

---

Thx

您的if语句将始终为真。$'。waar:in viewport'将返回一个jQuery对象，无论是否为空，都无所谓，它是一个真实值

我相信你要找的是。是：

---

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

您的if语句将始终为true。$'。waar:in viewport'将返回一个jQuery对象，无论是否为空，都无所谓，它是一个真实值

我相信你要找的是。是：

---

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

1您正在使用它吗？我从未听说过：在视口中，所以我想你是。2您的问题很奇怪，您想在元素位于视口之外时隐藏它，即它无论如何都不可见？这是正常的浏览器行为。用户如何知道元素是隐藏的？或者您计划淡入/淡出它们。是的，我使用的就是viewport.js。事实上，情况正好相反。在视口中隐藏，在视口外显示。我更改了问题。确定，但在您的页面中，当前既不存在.waar也不存在.sticky信息。可能需要一些基本的html和css，但我将创建一个JSFIDLE进行测试。好的，请看这里：您可以添加和编辑此FIDLE并更新版本。我认为您将遇到的一个问题是，如果您有多个.waar或.sticky info实例，那么您需要将其中一个的实例作为目标。i、 e.$这个；你在用这个吗？我从未听说过：在视口中，所以我想你是。2您的问题很奇怪，您想在元素位于视口之外时隐藏它，即它无论如何都不可见？这是正常的浏览器行为。用户如何知道元素是隐藏的？或者您计划淡入/淡出它们。是的，我使用的就是viewport.js。事实上，情况正好相反。在视口中隐藏，在视口外显示。我更改了问题。确定，但在您的页面中，当前既不存在.waar也不存在.sticky信息。可能需要一些基本的html和css，但我将创建一个JSFIDLE进行测试。好的，请看这里：您可以添加和编辑此FIDLE并更新版本。我认为您将遇到的一个问题是，如果您有多个.waar或.sticky info实例，那么您需要将其中一个的实例作为目标。i、 e.$这个；是的，这很有效。你的代码在这里工作：我快疯了，因为它总是返回真的。是的，这很有效。你的代码在这里工作：我快发疯了，因为它总是返回真的。

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