sticky
오늘 노마드코더에서 본건데 꿀팁이네요
position: sticky;
아래 코드 실행해서 스크롤 해보세요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
header {
background: #0f0;
line-height: 100px;
text-align: center;
}
nav {
background: #0af;
top: 0;
position: sticky;
line-height: 30px;
text-align: center;
}
.main {
background: #1a1;
height: 2000px;
text-align: center;
}
footer {
background: #834;
text-align: center;
}
</style>
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<div class="main">
aaaa
</div>
<footer>
Footer
</footer>
</body>
</html>
댓글 3개