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 .html

Thx

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

• javascript
• jquery

• 1) Are you using this? appelsiini/projects/viewport I have never heard of :in-viewport so I assume you are. 2) Your question is odd, you want to hide an element when it is outside of the viewport i.e. it is not visible anyway? That is normal browser behaviour. How will the user know the element is hidden? Or perhaps you plan to fade them in/out. – lharby Commented Feb 6, 2015 at 13:45
• Yes it's that viewport.js I use. And indeed, it's the other way around. Hide when in viewport, show when out viewport. – MDC Commented Feb 6, 2015 at 13:55
• I changed the question. – MDC Commented Feb 6, 2015 at 14:17
• OK, but in your page, currently neither .waar nor .sticky-info exist. Might need some basic html and css, but I will create a jsfiddle for testing. – lharby Commented Feb 6, 2015 at 14:51
• OK see here: jsfiddle/lharby/3c5w0gbs you can add and edit this fiddle and update the version. I think an issue you are going to have is that if you have multiple instances of .waar or .sticky-info then you need to target this instance of one of them. i.e. $(this); – lharby Commented Feb 6, 2015 at 14:56

1 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..