元素isin-viewport时显示和隐藏div [英] Show and hide a div when element isin-viewport

问题描述

我希望< div class =sticky-info> 隐藏< span class =waar> 位于视口中。当< span class =waar> 离开我想要的视口< div class =sticky-info> 隐藏。

I want <div class="sticky-info"> to hide when a <span class="waar"> is in the viewport. When <span class="waar"> leaves the viewport I want <div class="sticky-info"> to hide.

第一部分隐藏< div class =sticky-info> 工作正常，但第二部分显示< div class =sticky-info> 没有。可能它真的很蠢但我不是那个JS向导。这是JS。

The first part hide <div class="sticky-info"> works fine but second part show <div class="sticky-info"> doesn't. Probably it's something really stupid but I'm not that JS wizard. Here's the 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

The page you can visit here http://www.joets.be/test/joetz/page_vakanties.html

Thx

推荐答案

您的if语句将始终为true。 $（'。waar：in-viewport'）将返回一个jQuery对象，空或不，没关系，它是一个真正的值。

Your if statement will always be true. $('.waar:in-viewport') will return a jQuery object, empty or not, it doesn't matter, it is a truthy value.

我相信你要找的是 .is（）：

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

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

这篇关于元素isin-viewport时显示和隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！