当css位置sticky停止粘贴

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

在这个例子中，我有一个左侧的酒吧，左侧粘贴（请注意，我不能使用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>

来源

2017-10-09 user1709076

请您创建一个小提琴什么的？ –

这个问题：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>

来源

2017-11-17 14:23:55

当css位置sticky停止粘贴

回答

相关问题