浮動的滾動元素正在更改滾動位置

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