sticky로 메뉴바 고정하기
2020. 11. 17. 20:45ㆍPrograming/CSS
반응형
스크롤링 했을때 네비게이션바가 상단에 고정시키는 가장 간단한 방법:
top : 0px
Position: sticky
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
margin-bottom:30px;
background: yellow;
}
article {
background-color: skyblue;
margin-top: 30px;
left: 50px;
top: 50px;
}
#nav {
height: 50px;
font-size: 30px;
text-align: center;
background-color: coral;
top: 0px; /* 맨위에 고정 */
position: sticky;
}
</style>
</head>
<body>
<h1>positon: sticky</h1>
<nav id="nav">Navigation Bar</nav>
<article>
<div>1</div>
<div id="box">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</article>
</body>
</html>
** IE 브라우저에서는 지원 안하지만 Edge브라우저는 지원한다! **
IE에서도 sticky속성을 이용할려면 방법은 js를 쓰는 방법 밖에....
반응형
'Programing > CSS' 카테고리의 다른 글
| CSS Position 개념정리! (0) | 2020.11.17 |
|---|---|
| CSS의 기본 규칙 (0) | 2018.09.08 |
| CSS 태그 종류 (0) | 2018.09.08 |