Переместить div с прокруткой окна не согласовано

Question

Мне нужна моя боковая панель для прокрутки вверх и вниз с окном, но остановитесь, когда div находится вверху или внизу. Приведенный ниже код работает, когда страница сначала загружается и прокручивается вниз, или когда страница прокручивается медленно, но когда страница прокручивается до самой нижней части div боковой панели, страница должна достигать вершины (а затем и некоторых) в чтобы вызвать изменение маржи.

Есть ли какой-нибудь другой триггер, который я должен искать, кроме как только на свитке? Как настроить этот код для правильной настройки div?

$(window).on("load scroll", function() { 
    var scrollYpos = $(document).scrollTop(); 
    var sidebarinfo = $("#sidebar").offset().top + $("#sidebar").height(); 
    var windowinfo = $(window).height() + $(window).scrollTop(); 
    if ((windowinfo)<(sidebarinfo)){ 
     $('#sidebar').css('margin-top', -scrollYpos); 
    } 
}); 

Боковая панель имеет фиксированное положение. Если я использую абсолютную позицию, div прокручивается отлично, но она не останавливается, когда нижняя часть div достигнута - она ​​просто продолжает прокручиваться с окном.

---

Я исправил основную часть проблемы с помощью этого кода.

$(window).on("load scroll", function() { 
    var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").height(); 
    var windowinfo = $(window).innerHeight() + $(window).scrollTop(); 
    if ((windowinfo)<(sidebarinfo)){ 
     $('#sidebar').css('top', -($(window).scrollTop())); 
    } 
}); 

Единственная проблема заключается в загрузке страницы, на боковой панели застревает в неправильном положении, пока он не прокручивается весь путь (и более).

Answer 1

я на самом деле понял, что мне нужно настроить несколько вещей и добавить предложение еще:

$(window).on("scroll", function() { 
    var scrollmargin = $(window).scrollTop() - $("#sidebar").outerHeight(); 
    var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").outerHeight(); 
    var windowinfo = $(window).innerHeight() + $(window).scrollTop(); 
    console.log($(window).scrollTop()); 
    if ((windowinfo)<(sidebarinfo)){ 
     $('#sidebar').css('top', (sidebarinfo + scrollmargin)*-1); 
    } 
    else { 
     var margintop = $(window).innerHeight() - $("#sidebar").outerHeight(); 
     $('#sidebar').css('top', margintop); 
    } 
});