Question

我想知道为什么position: sticky适用于某些x轴滚动，但是一旦你滚过屏幕宽度的初始宽度，你的粘性div就会停止粘贴。

在这个示例中，我有一个左侧栏向左侧（请注意我不能使用position: fixed或position: absolute，因为在我的实际项目中，左侧div和right-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>

Answer 1

这个问题：https://stackoverflow.com/a/45530506解决了这个问题。

一旦“sticky div”到达屏幕边缘，它就位于父元素视口的末尾。这会导致粘性元素停止并停留在父视口的末尾。此代码笔提供了一个示例：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>

Answer 2

在将height: auto;添加到正文的CSS属性中后，如下所示，此自动隐藏问题已解决。

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

希望对您有帮助。：）

Answer 3

我刚刚意识到的是停止粘连，因为您没有捕获溢出。如果您指定了 overflow: hidden;，则检查该轴内的所有内容是否完全适合所有屏幕尺寸，如果没有，则进行必要的调整以使内容适合。当您指定了 div 的高度并且内容在特定屏幕尺寸中超出该高度时，也会发生这种情况。

我希望这能帮助那些犯过同样错误的人。

当css位置粘滞停止粘住

3 个答案: