use*_*076 2 css boundary sticky css3
我想知道为什么position: sticky对某些X轴滚动有效，但是一旦滚动超过屏幕宽度的初始宽度，您的“粘性div”就会停止粘结。
在此示例中，我有一个左侧栏贴在左侧（请注意，我不能使用position: fixed或position: absolute，因为在我的实际项目中，左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>
小智 15
在我height: auto;按如下方式添加into body 的 CSS 属性后，此自动隐藏问题已修复。
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
height: auto;
}
希望对你有帮助。:)
这个问题：https : //stackoverflow.com/a/45530506回答了这个问题。
一旦“ sticky div”到达屏幕的边缘，它就位于父元素视口的末端。这将导致sticky元素停止并停留在父级视口的末端。该代码笔提供了一个示例：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>