37

我对 jQuery 比较陌生，但到目前为止我所看到的都是我喜欢的。我想要的是让 div （或任何元素）位于页面顶部，就好像“位置：固定”在每个浏览器中都有效一样。

我不想要复杂的东西。我不想要巨大的 CSS hacks。如果只使用 jQuery（版本 1.2.6）就足够了，我会更喜欢，但如果我需要 jQuery-UI-core，那也可以。

我试过 $("#topBar").scrollFollow(); <-- 但这很慢...我希望某些东西看起来很固定。

4

6 回答 6

61

使用这个 HTML：

<div id="myElement" style="position: absolute">This stays at the top</div>

这是您要使用的 javascript。它将一个事件附加到窗口的滚动条上，并将元素向下移动到滚动为止。

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

正如下面评论中所指出的，不建议将事件附加到滚动事件 - 当用户滚动时，它会触发很多，并可能导致性能问题。考虑将它与 Ben Alman 的debounce/throttle插件一起使用以减少开销。

于 2008-11-03T05:10:48.817 回答
7

美丽的！您的解决方案是 99%...而不是“this.scrollY”，我使用了“$(window).scrollTop()”。更棒的是这个解决方案只需要jQuery1.2.6库（不需要额外的库）。

我特别想要那个版本的原因是因为这是目前 MVC 附带的。

这是代码：

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});
于 2008-11-03T11:01:00.373 回答
7

对于那些支持“位置：固定”的浏览器，您可以简单地使用 javascript (jQuery) 在滚动时将位置更改为“固定”。这消除了使用此处列出的 $(window).scroll(function()) 解决方案滚动时的跳跃性。

Ben Nadel 在他的教程中演示了这一点： 使用 jQuery 创建有时固定位置的元素

于 2010-04-01T12:47:13.337 回答
2

HTML/CSS 方法

如果您正在寻找不需要太多 JavaScript 的选项（以及随之而来的所有问题，例如快速滚动事件调用），则可以通过添加包装器<div>和几个样式来获得相同的行为。当我使用以下方法时，我注意到滚动更加流畅（没有落后的元素）：

JS小提琴

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

JS

//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');​
});

当然，这种方法可以针对在运行期间获得/丢失内容的滚动区域进行修改（这将导致添加/删除滚动条）。

于 2012-07-23T21:36:35.250 回答
1

对于仍在 IE 6 中寻找简单解决方案的任何人。我创建了一个处理 IE 6 位置的插件：已解决问题并且非常易于使用：http ://www.fixedie.com/

我写它是为了模仿迟来的png的简单性，其中唯一需要的更改是添加脚本并调用它。

于 2010-09-21T02:43:05.007 回答
0

在一个项目中，我的客户希望在另一个 div 中有一个浮动框，所以我使用 margin-top CSS 属性而不是 top 以使我的浮动框保持在其父级中。

于 2009-08-16T12:58:50.507 回答