javascript - 滚动然后在更大的屏幕尺寸上修复 div 跳转

Question

我有一个元素，我为其实现了“滚动然后修复”行为——当用户滚动超过某个点时，div 的位置从相对位置变为固定位置，页面上的其余内容滚动在上面。

它似乎工作得很好，直到我将窗口大小调整到大约 1700px 及以上——div 在它获得为其分配位置的类后跳了一点:固定，或者它似乎在之后获得位置:固定类它实际上应该。

如果有人知道我做错了什么，或者是什么导致了这种不一致的行为，我将不胜感激!

JS:

window.addEventListener('scroll', function() {

        if (window.scrollY >= 50 ){
            $('.carousel').addClass("fixed");

        } else {

            $('.carousel').removeClass("fixed");
        }

    }

减少:

.carousel{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
   &.fixed{
     position:fixed;
     top:-50px;
 }
}

Answer 1

为此，您可以使用 position: sticky;。只需将 .carousel 类中的 absolute 替换为 sticky 并删除所有 JS 逻辑。由于此方法是纯 CSS，您将获得流畅的体验。

.carousel {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #840202;
    height: 100px;
}

请注意，此属性不是 widely supported