浮动的滚动元素正在更改滚动位置

Question

的jsfiddle

我有一个页面，分为三个部分。 标题，侧边栏和内容部分。 我正在尝试使侧边栏与页面一起滚动，直到它到达顶部为止，然后一直停留在那里，直到我们向下滚动，此时它一直停留在标题的底部。 相关摘要：

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，然后重置为Fiddle，而不是23。

为什么会回跳，我该怎么做才能解决？

Answer 1

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

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

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

#dock {
    height:300px;
}

body {
    height: 1000px;
}