Плавающий, прокрутка элемента изменяется положение прокрутки

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/

Причина это не работает, потому что вы не имели height: 1000px на #dock, и нет высоты для тела. Так как страница была высотой #dock, вы не могли прокрутить страницу #dock.

Так что я сделал следующее, и теперь он работает.

#dock { 
    height:300px; 
} 

body { 
    height: 1000px; 
}