[Vue]BootStrap-Vue Navbar 상단고정

 웹페이지의 화면을 스크롤할 때 항상 화면 상단에 Navbar가 고정된 페이지를 가끔 볼 수 있다. 이는 페이지의 어느 위치에서든 Navbar의 메뉴에 접근할 수 있다는 점에서 사용자에게 편리함을 제공한다.

 

1. Navbar 설정

BootStrap-Vue에서는 sticky라는 속성을 이용해 화면 상단에 Navbar를 고정할 수 있다.

여기서는 NavBar를 직접적으로 설정하지 않고 Navbar를 포함하고 있는 header태그에 설정해주었다.

HTML

<header class="sticky-top">
	<NavBar></NavBar>
</header>

CSS

/* 상단고정 */
.sticky-top {
  position: sticky;
  top: 0;
}

 

2. Navbar의 부모요소 설정

위의 방식을 사용하기 위해서는 필수적으로 Navbar의 부모 요소에도 설정해줄 것이 있다. 바로 position:relative이다. 

HTML

  <div class="position-relative">
    <header class="sticky-top">
      <NavBar></NavBar>
    </header>
  </div>

CSS

.position-relative {
  position: relative;
}

이는 Bootstrap-Vue 공식문서에도 나와있다.

 

위와 같이 구현하면 Navbar를 화면 상단에 따라다니도록 구현할 수 있다.