Jak sprawić, aby div pojawił się od góry podczas przewijania w dół?

Question

Chciałbym, aby div pojawiło się i ześlizgnęło się po przewinięciu, przechodząc przez nagłówek.

Oto co powinno wyglądać następująco:

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

Oto co mam tak daleko, ale to nie działa.

http://jsfiddle.net/nHnrd/

Answer 1

Musisz dowiedzieć się wysokość nagłówka i jej pozycję na stronie, a następnie po prostu pokazać lub ukryć div w zależności od wartości scrollTop jQuery.

Na przykład:

// 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(); 

Potem wystarczy ustawić .fixedDiv do position: fixed: top: 0; lewo: 0;

Edytuj: Dodałem funkcję checkY(), którą można wywołać za każdym razem, gdy strona ładuje się, a także przewija. Aby jednak najpierw go ukryć, po prostu użyj CSS.

Answer 2

może chcesz po prostu pokazać i ukryć div zamiast pseudo klasy I ukryć i pokazać

początkowo. $ ("# myDiv") hide(); następnie (na przewijanie): $ ("# mydiv"). Show();

zestaw co chcesz div wyglądać tzn 0,0 i stałe

Wykorzystaj Keep It Simple metoda!

Answer 3

Zaktualizowałem Twój jsfiddle o coś, co możesz wypróbować.

Spróbuj tego:
http://jsfiddle.net/nHnrd/10/

Również ten artykuł był pomocny:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/