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

by katalin_2003

HTML

<div style="height: 1000px;border: solid red 1px;" >
    <div id="div0" style="height: 500px;">
            Div 0 [tall div]
    </div>
    <div id="div1">
        Div 1
        jkghdfghfdghdfgioh
        fdgdjlgjksdkokdsfds
    </div>
</div>

CSS

div {
    border: solid black 1px;
    height: 100px;
}

JavaScript

$("#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(400).show(0);
        divIsShowing = true;
    } else if ((bottomPageScrollPos < divBottomPos) && (divIsShowing)) {
        $("#div1").hide();
        divIsShowing = false;
    }

});