Почему не срабатывает скрипт фиксирования шапки?

Question

Подскажите пожалуйста почему не срабатывает данный скрипт?

Есть проект, который собран на gulp. Скрипт подключаются следующим образом (см. на картинке)

Все скрипты прекрасно работают, кроме файла fixed.js, не показывает ошибки и никак не срабатывает. Данный скрипт отвечает за фиксированние шапки и выглядит вот так (на примере код)

$(function() {
 let header = $('.header');
  
 $(window).scroll(function() {
   if($(this).scrollTop() > 1) {
    header.addClass('header-fixed');
   } else {
    header.removeClass('header-fixed');
   }
 });
});

.main {
  height: 2000px;
}

.header {
    padding: 25px 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0 auto;
    z-index: 11;
  }
  
  .header-fixed {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: #000;
      color: #fff;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main class="main">
  <header class="header">
    <div class="header__container">
    текс
      </div>
  </header>
</main>

Answer 1

Добавил реализацию fixed.js на чистом JS.

У вас в CSS ошибка в имени класса .header_fixed

 let header = document.querySelector('.header');
  
 window.onscroll = function() {
   if(this.pageYOffset > 1) {
    header.classList.add('header_fixed');
   } else {
    header.classList.remove('header_fixed');
   }
 };

.main {
  height: 2000px;
}

.header {
    padding: 25px 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0 auto;
    z-index: 11;
  }
  
  .header_fixed {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      background: #000;
      color: #fff;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main class="main">
  <header class="header">
    <div class="header__container">
    текс
      </div>
  </header>
</main>

БЛОГ НА HUSL

Почему не срабатывает скрипт фиксирования шапки?

Ответы (1 шт):