disappearingNavBar

HTML

<header class="header">
    <div class="logo">BRAND</div>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </nav>
  </header>

  <section class="one">
    <div class="container">
      <h1>WELCOME</h1>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam incidunt fugiat rem 
        sit sunt amet, maxime repudiandae numquam neque error, explicabo aliquid quisquam 
        optio sapiente voluptas modi soluta voluptatum tempora.
      </p>
    </div>
    <section class="two"></section>
  </section>

CSS

header에는 좌측 상단 로고와 우측 상단에 메뉴들이 위치할 예정.
position:fixed;로 상단에 고정해두기.
transition은 css 속성 변경할 때 애니메이션 속도 조절

header에 스크롤 이벤트가 붙으면 top:-7rem;을 줘서 위로 올라가서 사라질 수 있게. 스크롤이 다시 올라오면 다시 위치로 복귀하는 것이고.

로고는 text-transform: uppercase를 통해 대문자로 변경

nav는 적당히 오른쪽에 위치해야 하되, 목록이 5개 이므로 left:30%로 주기. 너비는 60%정도 갖기

가상요소(after, before)는 가상 요소를 삽입하는 것.
before는 요소 위쪽(앞쪽에), after는 요소 아래쪽(안쪽에) 생성하는 것.

hover를 통해 메뉴에 마우스 올려놓으면 막대기 늘어나도록 인터랙션 구현

.two 클래스에는 top을 100vh로 줘서 뷰포트 바로 아래에 생성하기. (즉, 스크롤을 해야만 보일 수 있도록 값을 잡는 것임)

:root {
  --main-color: #e3e2df;
  --second-color: #000000;
  --third-color: #9a1750;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7rem;
  background-color: var(--main-color);
  z-index: 1;
  transition: 0.5s;
}

header.scroll {
  position: fixed;
  top: -7rem;
  left: 0;
  width: 100%;
  height: 7rem;
  background-color: var(--main-color);
  z-index: 1;
  transition: 0.5s;
}

.logo {
  position: absolute;
  left: 10%;
  bottom: 1rem;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--second-color);
}

nav {
  position: absolute;
  left: 30%;
  bottom: 1rem;
  width: 60%;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
}

nav ul li a {
  text-decoration: none;
  color: var(--second-color);
  text-transform: uppercase;
  font-size: 0.9rem;
}

nav ul li a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--second-color);
  transition: width 0.3s;
}

nav ul li a:hover::after {
  width: 100%;
  transition: width 0.3s;
}

.one {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: var(--main-color);
}

.container {
  position: absolute;
  left: 10%;
  top: 30%;
  width: 50%;
}

h1 {
  margin-bottom: 1rem;
  color: var(--third-color);
  font-size: 2rem;
}

.two {
  position: absolute;
  top: 100vh;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: var(--third-color);
}

JS

window.pageYOffset는 scrollY의 다른 이름. 문서가 수직으로 얼마나 스크롤됐는지를 픽셀 단위로 반환한다.

스크롤 이벤트가 동작하는 순간에는 스크롤을 내리면 current가 prev보다 커질 수밖에 없다. 스크롤을 하지 않는 한, prev 값은 0일 수밖에 없음.

if

• prevScrollPos > currentScrollPos ==> 즉, 스크롤을 위로 올리면, scroll 클래스 제거해줌으로써 header가 다시 내려올 수 있게,

else

• 그리고 else ==> 즉, 스크롤을 아래로 내리면, scroll 클래스를 붙여서 header가 위로 올라가서 사라질 수 있게

const header = document.querySelector('header');

let prevScrollPos = window.pageYOffset;

window.onscroll = function () {
  let currentScrollPos = window.pageYOffset;

  prevScrollPos > currentScrollPos ? header.classList.remove('scroll') : header.classList.add('scroll')
  // if (prevScrollPos > currentScrollPos) {
  //   header.classList.remove('scroll');
  // } else {
  //   header.classList.add('scroll');
  // }

  prevScrollPos = currentScrollPos;
}

참고

Create A Disappearing Nav Bar With JavasScript