Question

我对jQuery比较陌生，但到目前为止，我看到了我喜欢的内容。我想要的是div（或任何元素）跨越页面顶部，就好像“position：fixed”在每个浏览器中都有效。

我不想要复杂的东西。我不想要巨大的CSS黑客攻击。我更喜欢如果只使用jQuery（版本1.2.6）就足够了，但如果我需要jQuery-UI-core，那也没关系。

我试过$（“＃topBar”）。scrollFollow（）; ＆lt; - 但这很慢......我想要一些东西看起来非常固定。

Answer 1

使用此HTML：

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

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

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

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

Answer 2

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

Ben Nadel在他的教程中演示了这一点： Creating A Sometimes-Fixed-Position Element With jQuery

Answer 3

美丽！你的解决方案是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");
});

Answer 4

HTML / CSS方法

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

JS Fiddle

HTML

<div>

CSS

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

JS

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

当然，可以修改此方法以滚动在运行时获取/丢失内容的区域（这将导致添加/删除滚动条）。

Answer 5

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

我写这篇文章是为了模仿belatedpng的简单性，其中唯一必要的更改是添加脚本并调用它。

Answer 6

在一个项目中，我的客户端想要另一个div中的浮动框，所以我使用margin-top CSS属性而不是top，以便我的浮动框保留在其父级中。

有一个'position：fixed'（总是在顶部）div的最简单的jQuery方法是什么？

6 个答案: