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');
    }
});

我通过解除您拥有的事件并使用此代码替换它来对此进行测试。它似乎工作正常。

我无法理解为什么它在示例中起作用的原因： ~~toggleClass应该不断添加和删除“fixed”如果你滚动得足够多，因为条件为真（这里的true表示是否切换）。不断添加和删除固定类会导致跳跃行为。~~

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

[UPDATE]

实际上，我误读了文档。 True表示应该添加类（我不认为文档非常清楚）。因此......我能解释的唯一方法就是@dunc运行jQuery v1.2并且开关被完全忽略了......

jQuery滚动DIV跳跃并且定位不正确

1 个答案: