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?

I know that, but I'm looking for particular advice on how to write a script that would do that. — Francesca, Aug 14 '12 at 17:59
What have you tried? What does your html/css look like? We're here to help, not do everything for you. — Steve Robbins, Aug 14 '12 at 18:01

Chris · Answer 1 · 2012-08-14T18:36:18.297

31

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.

edited Aug 14 '12 at 18:36

answered Aug 14 '12 at 18:04

Chris

25,430
4
52
71

3

@Tom This is just an outline; not intended to be a ready-to-copy-paste code :) – Chris Aug 14 '12 at 18:11

score 5 · Answer 2 · answered Aug 14 '12 at 18:07

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

score 2 · Answer 3 · edited May 23 '17 at 12:18

SCROLLBARS & "$(window).scrollTop()"

What I have discovered is that calling such functionality as in the solution thankfully provided above, (there are many more examples of this throughout this forum - which all work well) is only successful when scrollbars are actually visible and operating.

If (as I have maybe foolishly tried), you wish to implement such functionality, and you also wish to, shall we say, implement a minimalist "clean screen" free of scrollbars, such as at this discussion, then $(window).scrollTop() will not work.

It may be a programming fundamental, but thought I'd offer the heads up to any fellow newbies, as I spent a long time figuring this out.

If anyone could offer some advice as to how to overcome this or a little more insight, feel free to reply, as I had to resort to show/hide onmouseover/mouseleave instead here

Live long and program, CollyG.

nickaknudson · Answer 4 · 2012-08-14T18:34:29.733

Modification of @Abody97's answer to show once a div has been scrolled past

http://jsfiddle.net/nickaknudson/f72vg/

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once top of div is scrolled past
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

OR once the bottom of the div is scrolled past

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

RESOURCES

Actually, you might want to re-check your use of .scrollTop() with the `div` itself. That only returns the location of the scrollbar that the `div` has, if at all. Sorry -- didn't read your code carefully the first time :) I think you want `.offset().top`. — Chris, Aug 14 '12 at 18:24
You're absolutely right. Read through scrollTop documentation too quickly! Thanks! Edited to comply :) http://jsfiddle.net/nickaknudson/f72vg/ — nickaknudson, Aug 14 '12 at 18:33

score 0 · Answer 5 · answered Aug 14 '12 at 18:13

Here is a working fiddle

The jquery

$(function(){
    var d = $('.hidden');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.show(2000);
        }
      else{
        d.hide(2000);
      }
    });

});

score -1 · Answer 6 · answered Aug 14 '12 at 18:07

The easiest way to do this would be to use jQuery with a function like this.

var eventPosition = 550; // This is the height position you want the event to fire on.
$(window).scroll(function(e) {
    if (window.screenY >= eventPosition) {
        fireEvent();
    }
});

function fireEvent() {
    // Add logic here to complete what you're trying to do.
};

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

6 Answers6