有一个'position:fixed'(总是在顶部)div的最简单的jQuery方法是什么？

我对jQuery比较陌生,但到目前为止,我看到了我喜欢的内容.我想要的是div(或任何元素)跨越页面顶部,就好像"position:fixed"在每个浏览器中都有效.

我不想要复杂的东西.我不想要巨大的CSS黑客攻击.我更喜欢只使用jQuery(版本1.2.6)已经足够好了,但是如果我需要jQuery-UI-core,那也没关系.

我试过$("#topBar").scrollFollow(); < - 但这很慢......我希望看起来真的很固定.

1> nickf..：

---

使用此HTML:

This stays at the top

这是您要使用的JavaScript.它会将一个事件附加到窗口的滚动条上,并在您滚动时将元素向下移动.

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

---

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

---

将事件直接附加到滚动事件不是一个好主意.请参阅jQuery作者:http://stackoverflow.com/questions/257250/what-is-the-simplest-jquery-way-to-have-a-positionfixed-always-at-top-div

---

可能值得缓存`$(window)`和`$('#myElement')`因为每次滚动事件触发时都会重复使用它们.`var $ window = $(window),$ elem = $('#myElement'); $ window.scroll(function(){$ elem.css('top',$ window.scrollTop()+'px');});`

2> Timothy Khou..：

---

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

3> 小智..：

---

对于那些支持"position:fixed"的浏览器,您只需使用javascript(jQuery)在滚动时将位置更改为"fixed".使用此处列出的$(window).scroll(function())解决方案滚动时,这消除了跳跃.

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