javascript - jQuery 滚动 DIV 跳动且定位不正确

Question

不久前，我询问了有关设置与页面其余部分一起滚动的 DIV 的问题。帖子可以查到here .

我已经使用以下代码进行了设置:

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}

可以找到该页面的副本 here .警报只是一些调试。

问题是，当您滚动少量内容时，#sidebar 突然出现在页面的最顶部。此外，有时当您进一步向下滚动时，边栏会出现 - 有时不会。

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

Answer 1

我仍在尝试弄清楚为什么它在 jsfiddle 示例中首先起作用，但无论如何，我知道如何修复它:

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

我通过取消绑定(bind)您拥有的事件并将其替换为这段代码来测试它。它似乎工作正常。

我无法理解为什么它在示例中起作用的原因:toggleClass 应该不断地添加和删除“fixed”如果你已经足够滚动，因为条件为真(这里的真意味着是否切换)。固定类的不断添加和删除会导致跳跃行为。

您可以在您的页面上观看:打开一些开发工具(firegubg 或 Chrome)并观察侧边栏元素发生了什么。

[更新]

实际上，我误读了文档。 True 意味着应该添加该类(尽管我认为文档不是很清楚)。因此...我可以解释的唯一方法是如果@dunc 正在运行 jQuery v1.2 并且开关被完全忽略...