jQuery滚动DIV是跳跃和定位错误

jQuery scrolling DIV is jumpy and positioned incorrectly

本文关键字：定位 错误 跳跃 滚动 DIV jQuery      更新时间：2023-09-26

不久前，我问过如何设置一个div，它可以与页面的其余部分滚动。帖子可以在这里找到。

我已经设置好了，使用以下代码：

JS。。

jQuery(function ($) {
    var el = $('#sidebar'),
    pos = el.position().top;
    alert(pos);
    $(window).scroll(function() {
        el.toggleClass('fixed', $(this).scrollTop() >= pos);
    });
});

CSS。。

/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0}

该页面的副本可在此处找到。警报只是一些调试。

问题是，当你滚动一小部分时，#sidebar突然出现在页面的最顶部。此外，有时当你进一步向下滚动时，侧边栏会出现——有时不会。

你知道是什么导致了这种看似随机的功能吗？

我仍在试图弄清楚为什么它在jsfiddle示例中首先有效，但无论如何，我知道如何修复它：

 $(window).scroll(function() {
    if($(this).scrollTop() >= pos){
        el.addClass('fixed');
    }else{
        el.removeClass('fixed');
    }
});

我通过取消绑定您的事件并用此代码替换它来测试这一点。它似乎运行良好。

我不明白为什么它在这个例子中有效：如果你已经滚动了足够多，toggleClass应该不断添加和删除"fixed"，因为条件是true（这里的true表示是否切换）。固定类的不断添加和移除导致了跳跃行为

你可以在你的页面上看到这一点：打开一些开发工具（firegubg或Chrome），观察你的侧边栏元素发生了什么。

[更新]

事实上，我看错了文件。True表示应该添加类（不过我认为文档不是很清楚）。因此我唯一能解释这一点的方法是，如果@dunc运行的是jQuery v1.2，而开关被完全忽略了。。。

相关文章：