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

tomandhisjones

I have been studying or in the IT field now for over 12+ years and it has always been my passion. I currently own WebDev-fu, which provides web development, digital marketing, analytics, and graphic design to local businesses. I am also a Lead Front-End Web Developer for Haystak Digital Marketing. In my spare time, I study Astrophysics and Quantum physics, Astronomy, and Hebrew. I have three amazing kids and a wife I am in awe of. They are truly my inspiration.

You may also like...

Leave a Reply

%d bloggers like this: