當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停止粘貼

回答

相關問題