侧边栏滚动 down/up 当用户滚动 down/up 浏览器 window 而不使用位置：粘性和固定？

Question

我需要侧边栏在我们向下滚动时向下滚动，我不能使用 CSS 位置 – 固定/粘性，因为侧边栏水平位置需要与放大和缩小的形式一致并且应该工作在 chrome 和 IE11 上，但是我使用的是相对位置和绝对位置。我尝试通过使用 getBoundingClientRect() 函数计算表单在视口上方的位置向下滚动时修改侧边栏顶部属性（位置：绝对）的逻辑，但是侧边栏从一个位置到另一个位置的过渡不是流畅并提供糟糕的用户体验。需要有一些逻辑可以平滑地改变侧边栏的位置并使它 up/down aImage of sidebar with viewports 我们滚动 up/down.

Answer 1

我得到了他结合相对定位和固定定位的工作。 position: relative 当用户滚动小于 250px 并且如果用户滚动大于 250px 位置 属性更改为 fixed with top: 150px 不提供 right/left 属性。解决方案的关键是不提供右/左属性，这会导致侧边栏的水平位置与缩放时窗体的位置保持一致 in/out 通过保持侧边栏相对于它的水平位置自己的初始位置。早些时候，我提供了 right 属性以及 top 和 position: fixed。放大时，right: 50px 属性导致侧边栏逐渐远离 Form 并靠近视口的右边缘并使其看起来很奇怪。

根据 (Position fixed without top and bottom) 的答案 – “使用固定位置而不设置顶部、左侧、.. 将具有与相对于其自身初始位置的绝对位置相同的行为。但设置顶部、左侧...将固定相对于文档或页面的位置。”

//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;
        }
}

对于 scss 的新手 – “&.sidebar-sticky-top” 是 select 元素，它同时具有类 – “sidebar” 和 “sidebar-sticky-top” . &.是父级 selector 并且指的是外部 selector（在本例中为“.sidebar”）

侧边栏滚动 down/up 当用户滚动 down/up 浏览器 window 而不使用位置：粘性和固定？

Sidebar to scroll down/up as user scroll down/up the browser window without using position: sticky and fixed?

html

javascript

css

scroll

position