[Node JS] 상단 고정 navbar 만들기 (HTML)

 

스크롤을 계속 내려도 상단에 고정되어 있는 navbar를 만들어 보자.

사실 아주 간단 하게 navbar-fixed-top만 추가하면 된다.

 

header.html을 따로 두었고 nav의 class에 다음과 같이 navbar-fixed-top를 추가 했다.

<nav class="navbar navbar-fixed-top navbar-dark bg-dark" style="background:rgba(0,0,0,0.4)">

 

이런 메뉴가 상단에 만들어진다. 까맣고 투명하게 만들었다.

 

 

navbar를 쓰려면 html파일의 맨위에 다음과 코드만 추가하면 된다.

<header class="main-header" ng-controller="HeaderController" ng-include="'partials/header.html'">
</header>

ng-include로 header.html을 호출하고 있다. 

 

 

 

테스트를 해보기 위해 스크롤이 필요한 페이지를 들어가본다.

다음은 Intro 페이지이다.

 

 

 

잘되는 것을 확인 가능!