滚动然后修复更大屏幕尺寸上的 div 跳转答案

【问题标题】：scroll then fix div jumps on larger screen sizes滚动然后修复更大屏幕尺寸上的 div 跳转
【发布时间】：2019-08-30 14:19:18
【问题描述】：

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

它似乎工作得很好，直到我将我的窗口大小调整到大约 1700 像素及以上 - 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;
 }
}

【问题讨论】：

您能为此创建一个 Fiddle 或 Ply 吗？
codepen.io/lisakb/pen/pozrbwo 基本上就是这样......但是这里的行为要流畅得多。可能是因为图像、内容等导致速度变慢。
我有点困惑，你希望content here 仍然显示还是只是它跳转的事实？
它在跳跃，因为一旦您将其设置为固定，它会自动返回到top: 0; 然后很快就会执行top: -50px; 我认为如果您只是保持它固定然后只是当他们向下滚动一点时执行top: -50px;。
@HaldenCollier 我实际上确实需要它最初向上滚动一点，所以我不能从固定位置开始。

标签： javascript css position css-position

【解决方案1】：

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

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

请注意，这个属性不是widely supported

【讨论】：

这将是完美的，但我认为浏览器支持问题有点大问题。
我认为目前所有的现代浏览器都支持粘性，除了 Internet Explorer、opera mini 和 blackberry 浏览器。如果您的目标是 100% 的覆盖率，那么也许是的。有趣的事实：- stackoverflow 的左侧边栏使用位置：粘性。