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

我试图创建一个粘性边栏，如下所示，边栏的高度大于视口的高度

这是页面结构：

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

//侧边栏div
var stickySidebar=$（'.sticky'）；
var stickyHeight=stickySidebar.height（）；
var stickyOffsetLeft=$（'.sticky'）.offset（）.left；
var originalOffset=stickySidebar.offset（）.top+$（'.main menu'）.height（）；
//内容左分区
var contentLeft=$（'.content__左'）；
var contentLeftTop=contentLeft.offset（）.top；
//浮动菜单
var main menu=$（'.main menu'）；
var mainmenuHeight=mainmenu.height（）；
var lastScrollTop=0；
var onScroll=函数（）{
var sidebarTop=stickySidebar.offset（）.top；
var scrollTop=$（窗口）.scrollTop（）；
无功补偿；
//向下滚动时触发
如果（scrollTop>lastScrollTop）{
//视口的底部位置
var ViewportBottom=$（窗口）.scrollTop（）+$（窗口）.height（）；
//如果在向下滚动时发现类“fixed top”，请将其删除并添加“hang”
if（stickySidebar.hasClass（“固定顶部”））{
stickySidebar.removeAttr（'style'）；
var newTop=stickySidebar.offset（）.top；
stickySidebar.removeClass（“固定顶部”）；
stickySidebar.addClass（“挂起”）；
//计算悬挂类的“顶部”
css（'top'，newTop-contentLeftTop）；
}
//如果视口的底部与侧边栏的底部相交，
如果（视口底部>$（'.sticky'）.offset（）.top+$（'.sticky'）.height（））{
//删除所有添加的类，改为添加“固定底部”类
css（“top”和“）；
stickySidebar.removeClass（“挂起”）；
stickySidebar.removeClass（“停止顶部”）；
stickySidebar.removeClass（“停止底部”）；
stickySidebar.addClass（“固定底部”）；
css（{“宽度”：0.3*stickySidebar.parent（）.width（）}）；
//css（{“宽度”：0.3*stickySidebar.parent（）.width（），“left”：stickyOffsetLeft}）；
}
var contentLeftBottom=$（'.content\uuuu left'）.offset（）.top+$（'.content\uu left'）.height（）；
//当视口底部穿过“内容左”的底部时，删除类“固定底部”并添加“停止底部”
如果（ViewportBottom>contentLeftBottom）{
css（'width'，“”）；
//css（'left'，“”）；
stickySidebar.removeClass（“固定底部”）；
stickySidebar.addClass（“停止底部”）；
css（'top'，contentLeft.height（）-stickyHeight）；
}            
}
else{//在向上滚动时触发
//如果在向上滚动时发现类“fixed bottom”，请将其删除并添加“hang”
if（stickySidebar.hasClass（“固定底部”））{
stickySidebar.removeAttr（'style'）；
var newTop=stickySidebar.offset（）.top；
stickySidebar.removeClass（“固定底部”）；
stickySidebar.addClass（“挂起”）；
//计算悬挂类的“顶部”
css（'top'，newTop-contentLeftTop）；
}
//当视口顶部小于侧边栏顶部时，添加类“fixed top”
如果（scrollTop+mainmenuHeight<$（“.sticky”）.offset（）.top）{
css（“top”和“）；
stickySidebar.removeClass（“挂起”）；
stickySidebar.removeClass（“停止底部”）；
stickySidebar.addClass（“固定顶部”）；
css（{“宽度”：0.3*stickySidebar.parent（）.width（）}）；
//css（{“宽度”：0.3*stickySidebar.parent（）.width（），“left”：stickyOffsetLeft}）；
}
//当视口顶部小于“内容左”顶部时，添加类“停止顶部”
如果（滚动顶部+主菜单高度<内容左侧顶部）{
stickySidebar.removeClass（“固定顶部”）；
stickySidebar.addClass（“停止顶部”）；
stickySidebar.removeAttr（'style'）；
}
}
lastScrollTop=scrollTop；
}//onScroll
$（窗口）.on（'scroll'，onScroll）；

.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);