当 css 位置粘性停止粘贴时
Posted
技术标签:
【中文标题】当 css 位置粘性停止粘贴时【英文标题】：when css position sticky stops sticking 【发布时间】：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 【参考方案1】：这个问题：https://***.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 的高度并且内容在特定屏幕尺寸中超出该高度时，也会发生这种情况。
我希望这可以帮助那些犯过我同样错误的人。
【讨论】：
以上是关于当 css 位置粘性停止粘贴时的主要内容，如果未能解决你的问题，请参考以下文章