How to make a DIV appear after a set amount of time and after the user has scrolled past a certain point

Question

I've got a special DIV content box after each of my blogposts in wordpress.

I'd love to find a way to make it only appear after the user has scrolled down past the blog post, and after a set time delay of 1 second.

Is there any way to do that with javascript or jquery?

Answer 1

Try the code below. You can test it in this jsfiddle

  $("#div1").hide();
var windowHeight = $(window).height();
//alert(windowHeight);
var divHeight = $("#div0").height();
//var alert(divHeight);
var divBottomPos = $("#div0").offset().top + divHeight; //alert(divBottomPos);

var divIsShowing = false;
$(document).scroll(function () {
    var scrollPos = $(this).scrollTop();
    var bottomPageScrollPos = scrollPos + windowHeight;
    //alert(bottomPageScrollPos);
    if ((bottomPageScrollPos > divBottomPos) && (!divIsShowing)) {
        $("#div1").delay(1000).show(0);
        divIsShowing = true;
    } else if ((bottomPageScrollPos < divBottomPos) && (divIsShowing)) {
        $("#div1").hide();
        divIsShowing = false;
    }

});