滚动然后修复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类中用sticky替换absolute ，然后删除所有JS逻辑。 由于这种方法是纯CSS，因此您将获得流畅的体验。

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

请注意，此属性不受广泛支持