javascript スクロールに応じて固定されるメニュー

Posted 2021-05-03

.header
  nav.global-nav
    ul.global-nav__list
      li
        a(href='#') HOME
      li
        a(href='#') ABOUT
      li
        a(href='#') WORS
      li
        a(href='#') COMPANY
      li
        a(href='#') CONTACT
.fixed-point
  ul.fixed-point__list
    li
      a(href='#') MENU
    li
      a(href='#') MENU
    li
      a(href='#') MENU
    li
      a(href='#') MENU
    li
      a(href='#') MENU

.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

const w = $(window),
      header = $('.header'); // 固定させる要素
      
w.on('scroll', function() {
  const fixedElement = $('.fixed__point'); // 固定する位置の元になる要素
  let = wTop = w.scrollTop(),
        fixedPoint = fixedElement.offset().top + fixedElement.height();
  
  if ( wTop >= fixedPoint ) {
    header.addClass('.fixed');
  }   else {
    header.removeClass('.fixed');
  }  
});