如何讓div從頂部滾動時出現？

Question

我想要一個div出現並向下滑動，一旦你滾動通過標題。

下面是它應該是什麼樣子：

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

這裏就是我有這麼遠，但它不工作。

http://jsfiddle.net/nHnrd/

Answer 1

你需要找出標題的高度，並在網頁上的位置，然後只顯示或隱藏取決於使用jQuery的scrollTop的值股利。

例如：

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

然後你只需要在.fixedDiv設置位置：固定：頂部：0;左：0;

編輯：我添加了一個checkY（）函數，您可以在頁面加載和滾動時調用該函數。最初要隱藏它，只要使用CSS。

Answer 2

您可能希望只顯示和隱藏DIV，而不是僞類，並隱藏和顯示

開始： $（「＃mydiv」）隱藏（）; 然後（滾動）： $（「＃mydiv」）。show（）;

一套你希望你的DIV的樣子，即0,0和固定

使用保持簡單的方法是什麼！

Answer 3

我已經用你可以嘗試的東西更新了你的jsfiddle。

試試這個：
http://jsfiddle.net/nHnrd/10/

此外，這篇文章對您有所幫助：
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/