[CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll)

스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다.

&.fixed {
    padding: 1rem 0;
    background-color: #fff;
    .gnb-wrap {
      .gnb-logo {max-width: 14rem;}
      .gnb-list {font-size: 1.8rem;}
    }
  }

 

See the Pen Untitled by sel (@wimmwell) on CodePen.