“崩溃”位置：使用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');
    }

  });

});