Show div after scrolling 100px from the top of the page

html, javascript, jquery

Solution

Try this:

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        // > 100px from top - show div
    }
    else {
        // <= 100px from top - hide div
    }
});

Problem

I found this, but this does it 100px before the bottom of the page. I need it 100px from the top of the page. I know how to implement it, I've done other jquery animations, just not what needs to be in this one. ``` $(window).scroll(function(){ if($(window).scrollTop() + 100 > $(document).height() - $(window).height() ){ alert("at bottom"); } }); ``` And also, I need to know how to reverse this so the div disappears when the user scroll back up before the 100px. This will be used for a navigation bar. Edit2> This worked also: ``` $(window).scroll(function(){ if($(window).scrollTop() > 100){ $("#div").fadeIn("slow"); } }); $(window).scroll(function(){ if($(window).scrollTop() < 100){ $("#div").fadeOut("fast"); } }); ```

Original source