I would like a div to appear and slide down once you scroll pass the header.

Here's what it should look like:

.html

Here's what I got so far but it's not working.

/

I would like a div to appear and slide down once you scroll pass the header.

Here's what it should look like:

http://www.space./11425-photos-supernovas-star-explosions.html

Here's what I got so far but it's not working.

http://jsfiddle/nHnrd/

• javascript
• jquery
• html

3 Answers 3

You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.

For example:

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;

Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.

You might want to just show and hide your div rather than pseudo class AND hide and show

initially: $("#mydiv").hide(); then (on scroll): $("#mydiv").show();

set what you want your div to look like i.e. 0,0 and fixed

Use the Keep It Simple method!

I've updated your jsfiddle with something you can try.

Try this:
http://jsfiddle/nHnrd/10/

Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/