How to make a div from the top when scrolling down?

Question

I would like it to divappear and slide down as soon as you scroll through the title bar.

Here's how it should look:

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

Here is what I got so far, but it does not work.

http://jsfiddle.net/nHnrd/

Answer 1

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

For instance:

// 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 just need to set the .fixedDiv value to: fixed: top: 0; left: 0;

: checkY(), , , . , CSS.

Answer 2

div, AND hide

:  $ ( "# Mydiv" ) (). ( ):  $ ( "# Mydiv" ) ();.

, , div , , 0,0

Keep It Simple!

Answer 3

jsfiddle , .

:
http://jsfiddle.net/nHnrd/10/

, :
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/