当 css 位置粘性停止粘贴时答案

【问题标题】：when css position sticky stops sticking当 css 位置粘性停止粘贴时
【发布时间】：2018-03-21 04:34:36
【问题描述】：

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

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

【问题讨论】：

你能做一个小提琴之类的吗？
或者堆栈溢出sn-p

标签： css sticky boundary

【解决方案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>

【讨论】：

【解决方案2】：

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

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

希望对您有所帮助。 :)

【讨论】：

将它设置为 body 对我来说没有帮助。但是将height:auto 设置为第一页包装器确实如此。此问题与溢出有关：隐藏 |滚动 |汽车。更多信息uxdesign.cc/position-stuck-96c9f55d9526
也为我工作
这解决了我的问题。但我不知道它是如何解决的。谢谢！

【解决方案3】：

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

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

【讨论】：