“崩潰”位置：使用jquery的固定元素

Question

我正在嘗試實現徽標在此頁中的效果，該徽標固定在頁面頂部，但是向下滾動時，徽標的一部分仍然可見，而不是整個元素。

我發現很多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');
    }

  });

});