浮动，滚动元素正在改变滚动位置

Question

jsfiddle

我有一个页面，分为3个部分。标题，侧边栏和内容部分。我试图使侧边栏与页面滚动，直到撞击顶部，然后粘在那里，直到我们向下滚动，此时它会粘在标头的底部。相关片段：

var Sidebar = $("#Dock"), pos = Sidebar.offset();
$(window).scroll(function () {
    console.log('pre ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
    if ($(this).scrollTop() > (pos.top + 10) && Sidebar.hasClass('notFixed')) {
        Sidebar.removeClass('notFixed');
        Sidebar.addClass('fixed');
    } else if ($(this).scrollTop() <= (pos.top + 10) && Sidebar.hasClass('fixed')) {
        Sidebar.removeClass('fixed');
        Sidebar.addClass('notFixed');
    }
    console.log('pos ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
});

因此，这是实际发生的事情：我们向下滚动，我们从浮动元素中删除notFixed类，将其提供给fixed类，然后立即跳到$(this).scrollTop() = 23。最后，任何构建的滚动事件都可以解决，从我们的最后一个位置移动到23。在小提琴上，而不是23是0。

为什么会跳回，我该怎么办才能修复它？

Answer 1

编辑：更新的小提琴http://jsfiddle.net/whlhw/4/

它不起作用的原因是您在#dock上有height: 1000px，并且身体没有高度。因此，由于页面是#dock的高度，因此您无法滚动 #dock。

所以我做了以下操作，现在可以工作。

#dock {
    height:300px;
}
body {
    height: 1000px;
}