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.

Answer 2

In the window's onscroll, get the current scroll position as well as the div's position from the top of the page and show/hide your element accordingly.

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

Demo