[CSS] 화면 내릴 때 Navigation Bar 고정 시켜서 보여주기

제목과 같습니다.

웹에서 스크롤을 내렸을 때, 네비게이션 바가 고정되어 같이 내려온 것을 본 적 있으신가요?

그 부분을 공유해보도록 하겠습니다.

설명

1. 글로벌 네비게이션은 스크롤을 이용해 내리면 사라짐

2. 로컬 네비게이션은 스코롤을 내리면 고정되어 보여줌

3. 다시 스크롤을 올려 높였을 때, 두 개의 네비게이션 보여줌

준비

3개의 파일만 준비하면 됩니다.

HTML 부분

글로벌 네비게이션을 아래와 같이 적용해봅니다.

명령어를 아래와 같이 입력해 봅니다.

.container
nav.global-nav
.global-nav-links
.global-nav-items*4

결과는 아래와 같이 나옵니다.

<div class="container">
  <nav class="global-nav">
              <div class="global-nav-links">
                  <div class="global-nav-items">item1</div>
                  <div class="global-nav-items">item2</div>
                  <div class="global-nav-items">item3</div>
                  <div class="global-nav-items">item4</div>
              </div>
  </nav>
</div>

<CSS 부분>

flex를 이용하여 스타일을 적용합니다.

.container {
}

.global-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: yellowgreen;
}

.global-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.global-nav-items {
  font-size: 20px;
}

로컬네비게이션 추가 (HTML)

로컬 네비게이션을 아래와 같이 적용해보겠습니다.

nav.local-nav
.local-nav-links
.local-nav-items*4

위와 같이 입력하면 아래와 같이 html 코드가 입력됩니다.

<nav class="local-nav">
            <div class="local-nav-links">
                <div class="local-nav-items">local item1</div>
                <div class="local-nav-items">local item2</div>
                <div class="local-nav-items">local item3</div>
                <div class="local-nav-items">local item4</div>
            </div>
</nav>

로컬네비게이션 추가 (CSS)

flex 를 이용하여 적용합니다.

.local-nav {
  position: absolute;
  top: 50px;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: blueviolet;
}

.local-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.local-nav-items {
  font-size: 10px;
}

스크롤 생성을 위해 화면 크기 조정 (CSS)

현재는 화면에 스크롤이 생기지 않습니다.

그래서 높이를 화면의 크기보다 2배로 적용하기 위해 CSS 파일안에서 container 에 아래와 같이 적용합니다.

.container {
  height: 200vh;
}

화면이 두 배로 늘어나서 스크롤을 내릴 수 있습니다.

하지만, 스크롤을 내렸을 때 네비게이션바도 사라지죠??

하지만 저는 둘 중에 하단의 네비게이션은 계속 고정시켜 보여주고 싶습니다.

이 부분은 자바스크립트로 적용해봅니다.

하단 부분 네비게이션 고정 <자바스크립트>

let yOffset = 0;

const navGlobalFixed = () => {
  if (yOffset > 50) {
    document.body.classList.add("local-nav-sticky");
  } else {
    document.body.classList.remove("local-nav-sticky");
  }
};

const load = () => {
  window.addEventListener("load", () => {
    window.addEventListener("scroll", () => {
      yOffset = window.pageYOffset;
      console.log("y: " + yOffset);
      navGlobalFixed();
    });
  });
};

load();

하단 부분 네비게이션 고정(CSS 부분 추가)

.local-nav-sticky .local-nav {
  position: fixed;
  top: 0px;
  border-bottom: 0.001px solid #e5e8eb;
  background-color: blueviolet;
}

결과

설명

준비