기능: 스크롤 헤더 변경, 현재 페이지 nav메뉴 포커스

html

<header id="header">
 <div class="inner">
   <nav class="gnb">
     <ul>
       <li><a href="/menu1" class="nav-link">MENU1</a></li>
       <li><a href="/menu2" class="nav-link">MENU2</a></li>
       <li><a href="/menu3" class="nav-link">MENU3</a></li>
     </ul>
   </nav>
   <h1 class="logo"><a href="/"><img src="/images/common/logo.svg" alt=""></a></h1>
   <h1 class="logo2"><a href="/"><img src="/images/common/logo2.svg" alt=""></a></h1>
 </div>
</header>

<script>
  $(document).ready(function(){
    // 스크롤시 헤더 변경
    $(window).on('scroll', function(){
      if ($(window).scrollTop()){
        $('#header').addClass('scrollgnb');
      } else {
        $('#header').removeClass('scrollgnb');
      }
    });
    // 선택된 메뉴 온포커싱
    let path = window.location.pathname;
    $('.nav-link').each(function() {
      if(path === $(this).attr('href')) {
        $(this).addClass('on');
      }
    });
  });
</script>

SCSS

#header {
  .inner {
    .gnb {
      ul {
        li {
          a {display: block; color: #000000; transition: all 100ms;
            &.on {font-weight: 700; color: #996033;}
          }
        }
      }
      .logo2 {display: none;}
    }
  }
  &.scrollgnb {transition: all 300ms;
    .logo {display: none;}
    .logo2 {display: block;}
  }
}