0.sticky속성
1.sticky속성 적용하기
Sticky 속성
sticky속성 사용 시, position속성과 top, bottom, left, right와 같은 위치 속성 두가지는 필수로 설정해주어야한다.
.sticky{
position:sticky;
top:0px;
}sticky 속성은 부모 요소 안에서만 sticky를 적용하여야하며, 부모 요소중에 overflow:auto, overflow:hidden, overflow:scroll속성과 함께 사용할 수 없으며, IE에서는 지원하지 않는다.
Sticky 속성 적용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
nav{
width: 100%;
height: 60px;
position: fixed;
top:0;
background-color: grey;
text-align: center;
font-size:20px;
font-weight: bold;
z-index: 9999;
}
.content{
width: 100%;
height: 300vh;
margin-top: 65px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.left_content{
width: 69%;
height:100vh;
float:left;
position:sticky;
top:65px;
border: 4px solid rgba(0, 14, 30, 0.671);
}
.right_content{
width: 29%;
height:200vh;
float: right;
position:sticky;
top:65px;
border: 4px solid rgba(0, 48, 60, 0.582);
}
</style>
</head>
<body>
<nav>Nav Bar</nav>
<div class="content">
<div class="left_content">
Left Content
</div>
<div class="right_content">
Right Content
</div>
</div>
</body>
</html>1.스크롤 start
2.스크롤 middle
3.스크롤 end
