側邊欄在用戶向下/向上滾動瀏覽器窗口時向下/向上滾動而不使用位置：粘性和固定？

Question

我需要側邊欄在向下滾動時向下滾動，我不能使用 CSS 位置 - 固定/粘性，因為側邊欄水平位置需要與放大和縮小時的表單一致，並且應該適用於 chrome 和 IE11，但是我是使用位置相對和絕對。 當我們通過使用 getBoundingClientRect() 函數計算窗體在視口上方的位置向下滾動時，我嘗試放置邏輯來修改側邊欄的頂部屬性（位置：絕對），但是側邊欄從一個位置到另一個位置的過渡並不平滑，並給出了一個糟糕的用戶體驗。 需要有一些邏輯可以平滑地改變側邊欄的位置，並將其向上/向下移動帶有視口的側邊欄圖像，我們向上/向下滾動。

Answer 1

我讓他的工作結合了相對定位和固定定位。 position:relative當用戶滾動小於 250px 並且如果用戶滾動大於 250px 位置屬性更改為固定 top: 150px不提供 right/left 屬性。 解決方案的關鍵是不提供 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;
        }
}

對於scss的新手——“&.sidebar-sticky-top”是選擇同時具有“sidebar”和“sidebar-sticky-top”兩個類的元素。 &. 是父選擇器並引用外部選擇器（在本例中為“.sidebar”）