Make div show when a certain point on the page is passed

Question

Not sure where to start with this one really. Does anyone know of a way to make a div change from display:none (or anything similar really) once a certain div on the page has been scrolled past?

Answer 1

First, give your div an ID -- for example dvid, and suppose the other div (which you want to detect scrolling after) has an ID othdiv. Then you can do something like this:

$(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(); //reached the desired point -- show div
        }
    });
});

Tiny little jsFiddle demo: tiny little link.