如何在网页上有浮动/固定元素，具体取决于页面的哪一部分可见？

Question

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

这是网址： 配置 - Apple Store（美国）

侧面的“摘要”框对齐在子标题下方（包含所有Mac模型的图片），并且与内容块的高度相同。 如果向上滚动页面，整个页面将按预期上升。 但是，当内容块滚动离开浏览器窗口的可视区域时，摘要块会将其自身锚定到顶层并保持在那里，即使您滚动到页面的远端也是如此。

这种行为被称为什么？实现它的最简单，最干净的方法是什么？ 我更喜欢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}); 
    } 
  }); 
});

点击这里查看示例。

Answer 2

我想你在找

jQuery的滚动跟进

插入