<html lang="ja">
<body>
  <header class="mv">
    <h1>MV</h1>
  </header>
  <main>
    <nav id="page-nav" class="page-nav">
      <ul class="page-nav__list">
        <li class="page-nav__item">
          <a class="page-nav__link is-current" href="#about">
            <span class="page-nav__text">ABOUT</span>
          </a>
        </li>
        <li class="page-nav__item">
          <a class="page-nav__link" href="#service">
            <span class="page-nav__text">SERVICE</span>
          </a>
        </li>
        <li class="page-nav__item">
          <a class="page-nav__link" href="#topics">
            <span class="page-nav__text">TOPICS</span>
          </a>
        </li>
        <li class="page-nav__item">
          <a class="page-nav__link" href="#recruit">
            <span class="page-nav__text">RECRUIT</span>
          </a>
        </li>
        <li class="page-nav__item">
          <a class="page-nav__link" href="#news">
            <span class="page-nav__text">NEWS</span>
          </a>
        </li>
        <li class="page-nav__item">
          <a class="page-nav__link" href="#contact">
            <span class="page-nav__text">CONTACT</span>
          </a>
        </li>
      </ul>
    </nav>
    <section class="about" id="about">
      <h2>ABOUT</h2>
    </section>
    <section class="service" id="service">
      <h2>SERVICE</h2>
    </section>
    <section class="topics" id="topics">
      <h2>TOPICS</h2>
    </section>
    <section class="recruit" id="recruit">
      <h2>RECRUIT</h2>
    </section>
    <section class="news" id="news">
      <h2>NEWS</h2>
    </section>
    <section class="contact" id="contact">
      <h2>CONTACT</h2>
    </section>
    <footer id="footer">
    </footer>
  </main>
</body>
</html>
html {
  scroll-behavior: smooth;
}

header,section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  h1 {
    font-size: 150px;
    color: #000;
  }
  h2 {
    font-size: 32px;
    color: #000;
  }
}

.page-nav{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  z-index: 100;
  margin-inline: auto;
  transition-duration: 0.3s;
  &__list{
    padding: 15px 45px;
    margin-inline: auto;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  &__link {
    color: #000;
    text-decoration: none;
  }
}

footer {
  height: 50vh;
  background-color: #404040;
}

.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  transition-duration: 0.3s;
}

.is-current {
  color: #46e678;
  position: relative;
}
View Compiled 
document.addEventListener("DOMContentLoaded", () => {
  const pageNav = document.getElementById('page-nav');
  const footer = document.getElementById('footer');
  const firstSection = document.getElementById('about');
  const navLinks = document.querySelectorAll(".page-nav__link");

  if (!pageNav || !footer || !firstSection || navLinks.length === 0) return;

  let lastScrollY = window.scrollY;
  let isTicking = false;

  const updateNavVisibility = () => {
    const footerTop = footer.getBoundingClientRect().top;
    const firstSectionTop = firstSection.getBoundingClientRect().top;
    const isInview = footerTop <= 500 || firstSectionTop > 0;
    pageNav.classList.toggle('is-hidden', isInview);
  }

  const updateCurrentSection = () => {
    navLinks.forEach(link => {
      link.classList.remove("is-current");
      const sectionId = link.getAttribute("href");
      const section = document.querySelector(sectionId);
      if (section) {
        const sectionTop = section.offsetTop - 240;
        const sectionBottom = sectionTop + section.offsetHeight;
        if (lastScrollY >= sectionTop && lastScrollY <= sectionBottom) {
          link.classList.add("is-current");
        }
      }
    });
  }

  const onScroll = () => {
    if (isTicking) return;
    lastScrollY = window.scrollY;
    isTicking = true;

    requestAnimationFrame(() => {
      updateNavVisibility();
      updateCurrentSection();
      isTicking = false;
    });
  }

  window.addEventListener('scroll', onScroll);

  // 初期状態を設定
  updateNavVisibility();
  updateCurrentSection();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.