移动div与窗口滚动不一致

Question

I need my sidebar to scroll up and down with the window but stop when the div is at its top or bottom. The code below works when the page is first loaded and scrolled down or when the page is scrolled up slowly, but when the page is scrolled to the very bottom of the sidebar div, the page has to reach the top (and then some) in order to trigger that margin change.

Is there some other trigger I should be looking for besides just on scroll? How can I adjust this code to properly adjust the 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);
    }
});

The sidebar div is fixed position. If I use absolute position, the div scrolls fine, but it doesn't stop when the bottom of the div has been reached - it just continues to scroll with the window.

---

I've fixed the main part of the problem with this code.

$(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()));
    }
});

The only problem is on page load, the sidebar gets stuck in the wrong position until it is scrolled all the way up (and more).

Answer 1

I actually figured out that I needed to adjust a few things and add an else clause:

$(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);
    }
});