스크롤하면 해당 메뉴에 클래스 붙여서 효과주기

스크롤 했을때 해당 페이지에 위치해 있음을 확인 할 수 있도록 고정된 메뉴에 클래스를 붙여서 효과를 줄 수 있다.

예를 들면 이런식으로 클릭한 페이지를 클릭하거나 스크롤 되었을때 해당 메뉴에 클래스를 붙여줘서 스타일을 다르게 적용시켜준다.

            <nav id="nav">
                    
                    <li><a href="#visual">HOME</a></li>
                    <li><a href="#projects">PORTFOLIO</a></li>
                    <li><a href="#skills">SKILLS</a></li>
                    <li><a href="#aboutme">ABOUT</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </nav>

메뉴를 이렇게 넣었다면

<script>
   $(window).on('scroll', function () {
 
    var pos = $(window).scrollTop();
    var pos2 = pos + 50;
    var scrollBottom = pos + $(window).height();
 
    // Link Highlighting
    if (pos2 > $('#visual').offset().top)   { highlightLink('visual'); }
    if (pos2 > $('#projects').offset().top) { highlightLink('projects'); }
    if (pos2 > $('#skills').offset().top)  { highlightLink('skills'); }
    if (pos2 > $('#aboutme').offset().top) { highlightLink('aboutme'); }
    if (pos2 > $('#contact').offset().top ||
        pos + $(window).height() === $(document).height()) {
          highlightLink('contact');
    }
 
  });
 
  function highlightLink(anchor) {
    $('nav .active').removeClass('active');
    $("nav").find('[href="#' + anchor + '"]').addClass('active');
  }
 
    </script>

위와 같은 스크립트를 넣어준다.

스크롤 했을때 pos 변수에 스크롤탑 값이 들어가고

pos2에는 스크롤위치 값에 +50한 값이 들어간다.

scrollbottom에는 스크롤위치값과 윈도우 높에값이 들어간다.

현재 스크롤 위치에 +50한 값이 아이디값의 위치 top 값보다 크면 highlightLink 함수를 불러 온다.

마지막은 윈도우 높이값과 문서의 높이 값이 같으면 마지막 아이디 값을 불러온다.

highlightLink 함수가 실행되면 먼저 nav에 .active 클래스를 다 없애고 href에 해당 ancgor가 있는 버튼을 찾아서 active 클래스를 추가해준다.