「collapsing」position：使用jquery的固定元素

Question

我試圖實現徽標在this page中的效果，它固定在頁面的頂部，但向下滾動時，只有一部分保持可見，不是整個元素。

我發現了大量的jquery插件，它們會保持頁面頂部的元素頂部，但沒有一個能讓我自定義元素保留的高度。我的JavaScript不是從頭開始編寫代碼。有沒有人有任何可能有用的插件建議？

Answer 1

你不應該需要這個插件。 CSS可以保持徽標不變，並且您可以在用戶開始滾動頁面時使用JavaScript來更改元素的顯示。

假設您的標誌有標誌的ID，在CSS是：

#logo { 
    top: 0; 
    position: fixed; 
} 

由於看來你使用jQuery，你可以做這樣的事情：

$(function() { 

    // gets a reference to the document based on which browser is being used 
    var oDoc = $.browser.msie === true ? window : document; 

    // event handler for when the user scrolls 
    $(oDoc).scroll(function() { 

    // if the user is at the top, display the whole image 
    if($(this).scrollTop() === 0) { 
     $('#logo').css('margin-top', 0); 

    // otherwise, pull the image up a single em (200 is arbitrary) 
    } else if($(this).scrollTop() > 200) { 
     $('#logo').css('margin-top', '-1em'); 
    } 

    }); 

});