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

Question

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

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

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

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

美丽!你的解决方案是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 3

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

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