CSS 위치 sticky가 튀어 나올 때

position: sticky이 x 축 스크롤을 위해 작동하는 이유가 궁금 해서요. 그러나 화면 너비의 처음 너비를지나 스크롤하면 'sticky div'가 멈추게됩니다.CSS 위치 sticky가 튀어 나올 때

이 예제에서 왼쪽에 막대기가있는 왼쪽 막대가 있습니다. 실제 프로젝트에서 왼쪽 div와 오른쪽 div 모두를 스크롤해야하므로 position: fixed 또는을 사용할 수 없습니다. 위로 아래로 y 축에 따라, 따라서 우리는 그런

left-sticky-distance=999999%

이나 뭐 같은, 왼쪽-부착)

내가 정의 할 수있는 추가 CSS 매개 변수가 줄까?

몇 가지 테스트 코드를 보여주는이

<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 문제에 응답합니다.

"고정 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

답변

관련 문제