位置固定div离开正常文档流

Question

我正在尝试按如下方式创建粘性侧边栏，侧边栏的高度大于视口的高度。

这是页面结构：

<div class="wrapper">
    <div class="content__left"> </div>
    <div class="sticky"> </div>
<div>

在54px高度的顶部有一个固定的主菜单，它与页面一起滚动。我写的这段代码完美无缺，但问题是当应用“固定顶部”类和“固定底部”类时，它会改变侧边栏的宽度并将其移出正常的文档流程。即使我将宽度改回正常状态，它仍然会移出正常流量，因为结果不顺畅。我已经尝试对保证金进行修改，翻译它但似乎没有任何效果，我真的很感激这里的一些帮助。

以下是代码：

.stop-top{
   position:static;
    top:0px;
    bottom:auto;
}

.fixed-top{
    position:fixed;
    top:54px;
    bottom:auto;
}

.fixed-bottom{
    position:fixed;
    top:auto;
    bottom:0px;
}

.stop-bottom{
    position:relative;
    bottom:auto;
}

.hang{
    position:relative;
    bottom:auto;
}

 // Sidebar div
var stickySidebar = $('.sticky');
var stickyHeight = stickySidebar.height();
var stickyOffsetLeft = $('.sticky').offset().left;    

var originalOffset = stickySidebar.offset().top + $('.main-menu').height();

// content__left div
var contentLeft = $('.content__left');
var contentLeftTop = contentLeft.offset().top;

// Floating menu
var mainmenu = $('.main-menu');
var mainmenuHeight = mainmenu.height();

var lastScrollTop = 0;

var onScroll = function () {

    var sidebarTop = stickySidebar.offset().top;
    var scrollTop = $(window).scrollTop();

    var stopPosition;

    //triggered on scrolling down
    if (scrollTop > lastScrollTop){

        // Bottom Position of the viewport
        var ViewportBottom = $(window).scrollTop() + $(window).height();

        // if class "fixed-top" is found while scrolling down, remove it and add "hang"
        if(stickySidebar.hasClass("fixed-top")){
            stickySidebar.removeAttr( 'style' );
            var newTop = stickySidebar.offset().top;

            stickySidebar.removeClass("fixed-top");
            stickySidebar.addClass("hang");

            // Calculate 'top' for hang class
            stickySidebar.css('top', newTop - contentLeftTop);
        }

        // if bottom of the viewport crosses the bottom of the sidebar, 
        if(ViewportBottom > $('.sticky').offset().top + $('.sticky').height()){

            // Remove any added classes and instead add class "fixed-bottom" 
            stickySidebar.css("top","");
            stickySidebar.removeClass("hang");
            stickySidebar.removeClass("stop-top");
            stickySidebar.removeClass("stop-bottom");
            stickySidebar.addClass("fixed-bottom");
            stickySidebar.css({"width":0.3 * stickySidebar.parent().width()});
            // stickySidebar.css({"width":0.3 * stickySidebar.parent().width(), "left":stickyOffsetLeft });
        }

        var contentLeftBottom = $('.content__left').offset().top + $('.content__left').height();

        // When bottom of the viewport crosses the bottom of the 'content__left', remove class "fixed-bottom" and add "stop-bottom"

        if(ViewportBottom > contentLeftBottom){
            stickySidebar.css('width',"");
            // stickySidebar.css('left',"");
            stickySidebar.removeClass("fixed-bottom");
            stickySidebar.addClass("stop-bottom");
            stickySidebar.css('top', contentLeft.height() - stickyHeight);
        }            
    }
    else {// triggered on scrolling up

        // if class "fixed-bottom" is found while scrolling up, remove it and add "hang" 
        if(stickySidebar.hasClass("fixed-bottom")){

            stickySidebar.removeAttr( 'style' );
            var newTop = stickySidebar.offset().top;
            stickySidebar.removeClass("fixed-bottom");
            stickySidebar.addClass("hang");

            // Calculate 'top' for hang class
            stickySidebar.css('top', newTop - contentLeftTop);
        }

        // When top of the viewport is less than the top of sidebar, add class "fixed-top"
        if(scrollTop + mainmenuHeight < $(".sticky").offset().top){            
            stickySidebar.css("top","");
            stickySidebar.removeClass("hang");
            stickySidebar.removeClass("stop-bottom");
            stickySidebar.addClass("fixed-top");
            stickySidebar.css({"width":0.3 * stickySidebar.parent().width()});   
            // stickySidebar.css({"width":0.3 * stickySidebar.parent().width(), "left":stickyOffsetLeft});
        }

        // When top of the viewport is less than top of the 'content__left', add class "stop-top"
        if(scrollTop + mainmenuHeight < contentLeftTop){
            stickySidebar.removeClass("fixed-top");
            stickySidebar.addClass("stop-top");
            stickySidebar.removeAttr( 'style' );
        }
    }
    lastScrollTop = scrollTop;
} // onScroll

$(window).on('scroll', onScroll);