Show a element when page its scrolling

Design help General
1

Hello,

I have a <div> element that i want to show only when the page is scroll for 200 or 300px, but sure i dont want to see this element when the page its open…i have try this jQuery but its not working good…

<script>
jQuery(document).scroll(function ($) {
    var y = $(this).scrollTop();
    if (y > 200) {
        $('.scroll_div').fadeIn();
    } else {
        $('.scroll_div').fadeOut();
    }

});
</script>

Any help its appreciated!

2

fixed it for you. try this:

<script>
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y >= 200) {
        $('.scroll_div').fadeIn();
    } else {
        $('.scroll_div').fadeOut();
    }

});
</script>
3

Hello,

First thanks for your feedback :smile:

I have again same problem, the element its not hidden when the page its opened for first time, but when i scroll down and and go up again in top this jQuery its working.

4 
<script>
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y >= 200) {
        $('.scroll_div').fadeIn();
    } elseif (y <= 199) {
        $('.scroll_div').fadeOut();
    }

});
</script>

also, give .scroll_div a style of display:none;

1 Like
5

Thank you PixelGeek :smile:

Everything works perfect now!

Best,
Deni