Hiding and Showing Elements Based on the Scrollbar Position

I recently came across a problem of only showing a div when the user has scrolled down a certain amount of the window.  Here is what I came up with:

HTML

Just to outline the effects of the script, I created a box within a box…

Scroll Down Yo.

CSS

added a little styling…

.outer {
    width: 600px;
    height: 2000px;
    background: black;
    position: relative;
    color: white;
}
.inner {
    width: 200px;
    height: 200px;
    background: white;
    position: absolute;
    top: 40%;
    left: 37%;
}

JQuery

and finally, the script. Basically, the script finds the height of the current window, and when the user scrolls to the halfway point of the height, the second div will fade in. If they scroll back up, the box will fade out again.

$(window).on('scroll', function (){
    var $height = $(this).height();
    var $top = $(this).scrollTop();
    if($top > ($height/2)){
        $('.inner').fadeIn('fast');
    }else{
        $('.inner').fadeOut('fast');
    }
});

To see it in action, check out this jsfiddle

Leave a Reply

%d bloggers like this: