Show and hide a div when element isin-viewport

Question

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.

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>

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

Thx

Answer 1

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.

I believe what you are looking for is .is() :

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

Note: This assumes that your plugin supports the same functionality as native jQuery pseudo selectors..