position : sticky는 스크롤 시 화면에 고정되는 요소를 만들 수 있는 css 속성.
position : fixed
는 항상 화면에 고정되는 요소를 만들때 사용하는데 이 둘이 무슨 차이가 있냐면,
position : sticky
는 스크롤이 되어시 이 요소가 화면에 나오면 고정시킨다는 특징이 있음
<body style = "background : gray; height : 3000px;>
<div class = "gray">
<div class = "image>
<img src = "~~img.jpg" width = "100%">
</div>
<div style = "clear : both"></div>
<div class = "text"> text~~~~~~~~~~</div>
</div>
</body>
.gray {
background: lightgrey;
height: 2000px;
margin-top: 500px;
}
.text {
float: left;
width : 300px;
}
.image {
float: right;
width : 400px;
position: sticky;
top: 100px;
}
이렇게 작성하면 검고 긴 화면과 그 안에
텍스트와 이미지가 하나씩 보이는데
이미지에 position : sticky를 주면
1. 스크롤이 되면서 이미지가 보이는 순간!
2. viewport의 맨 위에서부터 100px 위치에서 고정
3. 부모 박스를 넘어서 스크롤 되면 이미지도 같이 사라짐.
❗주의점
1. 스크롤을 할 만한 부모 박스가 있어야 하고
2. top 등 좌표속성과 함께 써야 제대로 보임.
스크롤 시 화면에 고정되는 요소 만들기
fixed는 항상 화면에 고정할 요소를 만듦
sticky는 이 요소가 화면에 나오면 고정
+) 좌표 속성이랑 같이 써야 함