.sticky {
position: -webkit-sticky; /* for Safari*/
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p>이 프레임 내부를 스크롤 하여 sticky 위치가 작동하는 방식을 이해하십시오</p>
<p>참고 : IE/Edge 15 및 이전 버전은 끈적 거리는 위치를 지원하지 않습니다.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
<p>이 예제에서 sticky 요소는 스크롤 위치에 도달하면 페이지 상단 (top:0)으로 고정됩니다.</p>
</div>
</body>
</html>