当我们向下滚动时，我需要侧边栏向下滚动，我不能使用 CSS 位置 – 固定/粘性，因为侧边栏水平位置需要与放大和缩小时的表单保持一致，并且应该适用于 chrome 和 IE11，但是我使用的是相对和绝对的正位。 当我们通过使用getBoundingClientRect((函数计算视口上方的表单位置向下滚动时，我尝试使用逻辑来修改侧边栏的顶部属性(位置：绝对(，但是侧边栏从一个位置到另一个位置的过渡并不流畅，并且提供了糟糕的用户体验。 需要有一些逻辑可以平滑地更改侧边栏的位置，并将其向上/向下显示带有我们向上/向下滚动的视口的侧边栏图像。
我得到了他结合相对和固定定位的工作。位置：当用户滚动小于 250 像素时相对，如果用户滚动大于 250 像素，则位置属性将更改为固定，顶部：150 像素，而不提供右/左属性。解决方案的关键是不提供右/左属性，该属性通过保持侧边栏相对于其自身初始位置的水平位置，导致侧边栏的水平位置与放大/缩小时的表单位置保持一致。 早些时候，我提供了正确的财产以及位置：固定。放大时，右：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"(