Javascript 当用户在不使用位置的情况下向下/向上滚动浏览器窗口时向下/向上滚动的侧边栏：粘滞和固定？

当我们向下滚动时，我需要侧边栏向下滚动，我不能使用CSS位置-固定/粘滞，因为侧边栏水平位置需要与放大和缩小时的表单一致，并且应该在chrome和IE11上工作，但是我使用的是相对和绝对位置。 我尝试使用getBoundingClientRect（）函数计算窗体在视口上方的位置，在向下滚动时使用逻辑修改边栏的top属性（position:absolute），但边栏从一个位置到另一个位置的过渡并不平滑，给用户带来了不好的体验。

---

需要有一些逻辑来平滑地改变侧边栏的位置，并在我们上下滚动时将其上下移动。

我已经得到了他结合相对定位和固定定位的工作position:relative当用户滚动小于250px时，如果用户滚动大于250px，则position属性更改为fixed with top:150px而不提供right/left属性。解决方案的关键在于不提供右/左属性，这使得边栏的水平位置与放大/缩小时的形状位置保持一致，保持边栏相对于其自身初始位置的水平位置。 早些时候，我提供了正确的财产和顶部的位置：固定。放大时，right:50px属性导致侧边栏逐渐远离窗体，靠近视口的右边缘，使其看起来很奇怪

根据（）的答案——“使用固定位置而不设置顶部、左侧……将具有与相对于其初始位置的绝对位置相同的行为。但是设置顶部、左侧……将固定相对于文档或页面的位置。”

//sidebar.js
handleSidebarScroll() {
$(document).scroll(function() {
    let scrollTop = $(window).scrollTop;
    let sidebar = $('.sidebar');
    if(scrollTop < 250 ) { 
        If(sidebar.hasClass('sticky-sidebar-bottom')){
        sidebar.removeClass('sticky-sidebar-bottom');
    }
    sidebar.addClass('sticky-sidebar-top');
  }
    else {
        if(sidebar.hasClass('sticky-sidebar-top')){
        sidebar.removeClass('sticky-sidebar-top');
    }
   sidebar.addClass('sticky-sidebar-bottom');
    }
}

//SCSS
.sidebar-container{
    position: relative;
    }
.sidebar {
    width: 200px;
    height: 65vh;
    border: 5px solid black;
    &.sidebar-sticky-top{
        position: absolute;
        top: 50px;
        }
    &.sidebar-sticky-bottom{
        position: fixed;
        top: 150px;
        }
}

//sidebar.js
handleSidebarScroll（）{
$（文档）。滚动（函数（）{
让scrollTop=$（窗口）；
设边栏=$（'.sidebar'）；
如果（滚动顶部<250）{
If（sidebar.hasClass（'sticky-sidebar-bottom'））{
侧边栏。移除类（“粘性侧边栏-底部”）；
}
addClass（'sticky-sidebar-top'）；
}
否则{
if（sidebar.hasClass（'sticky-sidebar-top'））{
侧边栏。removeClass（'sticky-sidebar-top'）；
}
addClass（'sticky-sidebar-bottom'）；
}
}
//SCSS
.侧边栏容器{
位置：相对位置；
}
.侧边栏{
宽度：200px；
高度：65vh；
边框：5px纯黑；
&.侧边栏粘性顶部{
位置：绝对位置；
顶部：50px；
}
&.侧边栏粘底{
位置：固定；
顶部：150px；
}
}

对于那些不熟悉SCS的人来说-“&.sidebar sticky top”是选择同时具有两个类的元素-“sidebar”和“sidebar sticky top”。

---

&.是父选择器，并引用外部选择器（在本例中为“.sidebar”）

您是否能够发布一个，以便我们可以看到它现在如何与您尝试的内容一起工作？我已经开始工作，并在下面的回答中提供了解决方案。谢谢！