트렌드 오른쪽 섹션 레이아웃 질문

Question

트위터 보시면 오른쪽에 보시면 아무리 스크롤해도 사라지지않고 하단에 고정됩니다. 이건 어떻게 구현해야할지 잘 모르겠네요.. 영상에서도 안나오고 z.com 사이트에서도 구현이 안되있네요. 아무리 찾아봐도 잘 모르겠습니다. 트위터에서 #react-root > div > div > div.css-175oi2r.r-1f2l425.r-13qz1uu.r-417010.r-18u37iz > main > div > div > div > div.css-175oi2r.r-aqfbo4.r-10f7w94.r-1hycxz > div > div.css-175oi2r.r-1hycxz.r-gtdqiz > div > div > div 해당 셀렉션에서 flex-shrink: 0 속성이 해당 기능을 구현하는거같은데.. 해당 속성을 적용해도 저는 적용이안되네요... css너무 어려워..ㅠㅠ

제로초(조현영) · Answer

이거 저도 완전 그대로 따라하지 않는 한 비슷하게 구현이 어렵긴 한데요. 일단 flex-shrink 같은 속성도 있는데 position: sticky가 핵심입니다. 제가 봤을 땐 JS도 같이 쓰인 것 같습니다. 스크롤을 아래로 내리면 bottom: -500px 이런 식으로 아래로 sticky 고정되고, 스크롤을 위로 올리면 top: 100px 이렇게 위로 sticky로 고정됩니다. position: sticky가 동작하려면 상위 부모에 position: relative와 overflow: hidden 같은 게 있어야 합니다.