当 css 位置 sticky 停止粘贴

Question

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

在这个例子中，我有一个左侧边栏贴在左边（请注意我不能使用 position: fixed 或 position: absolute，因为在我的实际项目中，左边 - div 和 right-div 需要沿 y 轴上下滚动，因此我们只需要 left-side-sticking)

是否有我可以定义的附加 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

这个问题：回答了问题。

一旦 "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;添加到body的CSS属性后，这个自动隐藏的问题就解决了。

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

希望对您有所帮助。 :)

Answer 3

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

我希望这对犯过我同样错误的人有所帮助。

当 css 位置 sticky 停止粘贴

when css position sticky stops sticking

css

boundary

sticky