Nav 메뉴바 CSS Sticky 속성으로 상단 고정

현재 제작중인 스킨은 상단의 Nav 메뉴바와 왼쪽 사이드바의 일부 영역은 Position:sticky; 속성을 사용하여 상단에 고정하도록 구상을 하였습니다. 이번 포스트에서는

상단 Nav 메뉴바를 Sticky 속성을 사용하여 상단에 고정하는 방법

을 소개합니다.

레이아웃 구성

PC에 적합한 스킨을 제작하기 위해 아래 그림과 같이 3단 레이아웃을 구상하였습니다. 아래 레이아웃에서 붉은 색으로 표시한 부분은 화면 상단에 고정할 영역입니다. 상단에 고정할 요소는 CSS의 Sticky 속성을 사용할 예정입니다. 

PC형 웹페이지 3단 레이아웃

Position Sticky

CSS Fixed? Sticky?

CSS 포지션(Position)에서 화면을 고정하는 방법은 Fixed 속성과 Sticky 속성이 있는데 간략한 차이는 아래와 같습니다. 

  • Position: Fixed -> 스크롤과 관계없이 화면에 고정
  • Position: Sticky -> 최초에 relative속성과 같이 동작하다가 스크롤이 이동하면 지정한 지점에 요소를 고정

Sticky 속성 사용법과 유의사항

Sticky 속성을 사용하면 아래 그림과 같이 스크롤 움직임에 따라 특정 영역에 고정이 가능합니다. 

<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        div{
            margin:5px;
            text-align: center;
            font-size:30px;
            line-height: 100px;
            border:solid 1px black;
        }
        .sticky{
            background-color: yellow;
            position:sticky;
            top:0px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div class="sticky">div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    <div>div11</div>
    <div>div12</div>
    <div>div13</div>
    <div>div14</div>
    <div>div15</div>
    <div>div16</div>
</body>
</html>

Sticky 사용 예시

Sticky 속성은 Sticky 포지션을 사용할 요소에 Position:sticky; 로 포지션을 지정 후 top:0; 와 같이 고정될 영역만 입력해주시면 설정이 완료됩니다. 위의 2가지 코드를 삽입하였지만 동작이 되지 않는 경우 아래 사항을 고려해야합니다.

Sticky가 동작 하지 않을 때 확인 사항

  • Sticky 속성을 갖는 요소는 자신의 부모 요소안에서만 적용
  • 부모요소중에 overflow:auto, overflow:hidden, overflow:scroll 속성이 적용되어 있는 경우 사용 불가
  • IE(Internet Explorer) 사용 불가

3단 레이아웃 Nav 상단 고정

위의 레이아웃에서도 동일하게 Nav에 Position:Stickytop:0 속성만 추가하면 간단하게 구현할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        header,
        nav,
        div,
        aside,
        section,
        footer{
            border:solid 1px black;
            margin:5px;
            font-size:24px;
            text-align: center;
        }
        nav{
            position:-webkit-sticky;
            position:sticky;
            top:0;
            background-color:yellow;
        }
        main{
            display:flex;
        }
        aside,
        section{
            flex-grow: 1;
            height:800px;
        }
    </style>
</head>
<body>
    <header>Header</header>    
    <nav>Nav</nav>
    <div class="topAdd">Ads</div>
    <div class="title">Title</div>
    <main>
        <aside>Sidebar Left</aside>
        <section>Section</section>
        <aside>Sidebar Right</aside>
    </main>
    <footer>footer</footer>
</body>
</html>

Nav 메뉴바 Sticky 속성으로 상단 고정


마무리

이번 포스트는 CSS Sticky 속성을 사용하여 상단 Navigation바 상단 고정하는 방법에 대해 설명하였습니다. 다음 포스트는 왼쪽 사이드바를 Sticky 속성을 사용하여 상단에 고정하는 방법에 대해 설명할 예정입니다.

관련포스트

👉 HTML,CSS,Javacript 관련글 보기

👉 티스토리 스킨 제작 관련글 보기

댓글
댓글쓰기 폼