Bootstrap / JavaScript - 상단 메뉴바, 스크롤 이동

---

상단에 메뉴바를 고정하고 메뉴 클릭 시 해당 페이지로 이동하는 방법

1. 내비게이션 바

https://getbootstrap.kr/docs/5.3/components/navbar/
bootstrap에서 상단 메뉴바를 가져올 수 있다.
편집해야 할 점은 각 nav-link에 href에 페이지 이름을 변경하면 된다.

<!-- 상단 메뉴바 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Lee SeungHyun</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#section-About">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-Experience">Experience</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-Skill">Skill</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-Project">Project</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-Posting">Posting</a>
        </li>
      </ul>
      <span class="navbar-text">
        Hello World
      </span>
    </div>
  </div>
</nav>

각 세션에서는 id와 class로 각 부분을 편집해주면 된다.

<div class="sections">
  <div class="section section-About" id="section-About">                
    <hr>
    <h2>About</h2>
  </div>

  <div class="section section-Experience" id="section-Experience">             >  
    <hr>
    <h2>Experience</h2>
  </div>

  <div class="section section-Skill" id="section-Skill">               
    <hr>
    <h2>Skill</h2>
  </div>

  <div class="section section-Project" id="section-Project">               
    <hr>
    <h2>Project</h2>
  </div>

  <div class="section section-Posting" id="section-Posting">               
    <hr>
    <h2>Posting</h2>
  </div>
</div>

하지만 문제는 해당 코드는 상단 메뉴 고정으로 body의 일부분이 겹쳐진다.
body에 padding top을 걸어서 공간을 만들어주면 된다.

body {
  padding-top: 40px;
  /* 생략 */
}

2. JavaScript

해당 Bootstrap을 하나의 페이지 내부에서 스크롤 이동을 해주기위해서
추가적인 javascript를 추가해주어야 한다.

// 상단 메뉴바 - 버튼 클릭으로 해당 세션 이동
$('.nav-link').click(function (e) {
   var href = $(this).attr("href");
   var targetTop = $(href).offset().top -60 ;
   $("html").stop().animate({ scrollTop : targetTop }, 300);
   e.preventDefault();
});

nav-link의 버튼을 클릭해 href를 통해 각 세션의 위치를 받은 후 top을 통해 대상 위치를 받아온다.
scrollTop을 걸어서 해당 위치로 올리면 되는데 -60을 추가했다.
body의 padding top 값과 각 세션의 가로줄값을 고려한 부분이다.

// 상단 메뉴바 - 버튼 상태 업데이트 / 오프셋 값에 따라 
function Page__updateIndicatorActive() {
   var scrollTop = $(window).scrollTop();
  // 스크롤 
   $($(".section").get().reverse()).each(function (index, node) {
      var offsetTop = parseInt($(this).attr("data-offset-top"));
      if (scrollTop >= offsetTop) { 
         $(".nav-link.active").removeClass("active");
         var currentPageIndex = $(this).index();
         $(".nav-link").eq(currentPageIndex).addClass("active");
         $("html").attr("data-current-page-index", currentPageIndex);
         return false;
      }
   });
}

상단 메뉴바에서 상태를 확인하고 메뉴바의 버튼을 active 상태로 변경해주는 코드

// 상단 메뉴바 - 버튼 상태 업데이트 / 오프셋 값 변경
function Page__updateOffsetTop() {    
    $(".section").each(function (index, node) {
         var $page = $(node);
         var offsetTop = $page.offset().top - 60;
         $page.attr("data-offset-top", offsetTop);
    });    
    Page__updateIndicatorActive();
}

스크롤 때 현재 세션에 맞춰 상단 값을 조정한다.

3. 결과