logo标签列表

当CSS中的position: sticky停止粘附时

cssstickyboundary
27

我在想为什么position: sticky在某些x轴滚动时有效，但一旦你滚过屏幕宽度的初始宽度，你的“粘性div”就停止了粘合。

在这个例子中，我有一个左侧边栏，它会粘在左边（请注意，在我的实际项目中，左侧div和右侧div都需要沿着y轴上下滚动，因此我们只想要左侧边栏固定）。

是否有其他CSS参数我可以定义，比如

left-sticky-distance=999999%

或者类似这样的东西？

下面是一些演示测试代码

    <html>


    <body>

    <div style='
    position:sticky;
    z-index:1;
    left:0;
    width:100px;
    height:200px;
    overflow: hidden;
    background-color:#ff0000;
    opacity:0.8;'
    >

    </div>

      <div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'>B</div>
      <div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'>C</div>
      <div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'>D</div>
    </body>
    <html>
请创建一个 jsFiddle 或其他东西，可以吗？ - Ajay Gupta
或者是 Stack Overflow 的代码片段 - Vivaan
3个回答
41

在我将height: auto;添加到body的CSS属性中后，这个自动隐藏问题得到了解决。

body {
    background: #fff;
    color: #444;
    font-family: "Open Sans", sans-serif;
    height: auto;
}

希望这对您有所帮助。:)

1
将其设置为body在我的情况下没有帮助。但是将height:auto设置为第一个页面包装器有所帮助。这个问题与overflow: hidden | scroll | auto有关。更多信息请参见https://uxdesign.cc/position-stuck-96c9f55d9526。 - northernwind
1
我也试过了，有效。 - brianc
1
这解决了我的问题。但我不知道它是如何修复的。谢谢！ - Dinith Rukshan Kumara
1
如果有人能编辑这个答案并解释为什么它有效，那将是非常棒的。 - duhaime
min-height: 100vh; 做到了。谢谢！ - maiakd
同样的问题。我不得不移除“height:100%”。 - undefined
21
这个问题的答案在这里：https://dev59.com/1VcO5IYBdhLWcg3wmSyS#45530506。一旦“粘性div”到达屏幕边缘，它就位于父元素视口的末尾。这会导致粘性元素停止并停留在父元素视口的末尾。此代码pen提供了一个示例：https://codepen.io/anon/pen/JOOBxg 

#parent{
      width: 1000px;
      height: 1000px;
      background-color: red;
}
#child{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: sticky;
      top: 0px;
      left: 0px;
}
body{  
      width: 3000px;
      height: 3000px;
}
<html>
  <div id="parent">
    <div id="child">
    </div>
  </div>
</html>

1
不要使用height: 1000px;，而应该使用height: auto;给父元素，它会自动调整高度以正确显示其内容。 - Code With Bishal
1
我刚意识到的是，它停止粘附是因为您没有捕获溢出。如果您已经指定了overflow: hidden;，请检查该轴内的所有内容是否在所有屏幕尺寸上完美适配，如果不是，则进行必要的调整以使内容适合。当您指定了div的高度并且内容在某些屏幕尺寸下超过该高度时，也会发生这种情况。
我希望这可以帮助任何犯了和我一样的错误的人。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接