根据页面的哪个部分可见，您如何在网页上拥有浮动/固定元素？答案

【问题标题】：How do you have a floating/fixed element on a web page depending on which part of the page is visible?根据页面的哪个部分可见，您如何在网页上拥有浮动/固定元素？
【发布时间】：2009-09-11 04:15:46
【问题描述】：

我知道这个问题令人困惑，但我无法换种说法。

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

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

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

【问题讨论】：

标签： javascript jquery css xhtml

【解决方案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。

【讨论】：

在您的示例中，
嗯，建议将脚本标签尽可能放在文档中的最低位置，(is.gd/38y6u)，但是如果你把它放在头上就没有问题...

【解决方案2】：

我想你正在寻找

jquery-scroll-follow

插件

【讨论】：

上面的sn-p代码非常简洁，不需要插件。还是谢谢！