javascript - 根据页面的哪一部分可见，如何在网页上设置 float /固定元素？

Question

我知道这个问题令人困惑，但我无法用其他方式表达。

这是网址:Configure - Apple Store (U.S.)

侧面的“摘要”框与子标题(带有所有 Mac 型号的图片)下方对齐，并且与内容 block 处于同一高度。如果向上滚动页面，整个页面会按预期上升。然而，当内容 block 滚出浏览器窗口的可视区域时，摘要 block 将自身锚定到顶层并停留在那里，即使您滚动到页面的远端也是如此。

这种行为叫什么，实现它的最简单、最干净的方法是什么？我更喜欢 jQuery 插件和/或代码片段而不是纯 JavaScript。

Answer 1

你可以这样做:

$(function () { 
  var $el = $('.fixedElement'), 
      originalTop = $el.offset().top;  // store original top position

  $(window).scroll(function(e){ 
    if ($(this).scrollTop() > originalTop ){ 
      $el.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
      $el.css({'position': 'absolute', 'top': originalTop}); 
    } 
  }); 
});

检查示例 here .