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:


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

Scroll Down Yo.


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%;


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)){

To see it in action, check out this jsfiddle

Leave a Reply

%d bloggers like this: