0

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

Есть проект, который собран на 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>

6
  • проблема решена? 20 авг 2021 в 9:39
  • @highpassion нет, здесь работает, даже когда отдельно выносил например здесь jsfiddle.net/moiseev1788/m8q9ca1w/1 все работает, но при сборке он никак не реагирует. Может быть проблема в версии jquery?
    – mo link
    20 авг 2021 в 9:40
  • пробуйте с 3.4.*, попробуйте fixed.js последним подключать 20 авг 2021 в 9:43
  • @highpassion, не-а, поставил версию 3.4.1, вынес код из файла, реакции никакой, не ставит класс к header? Возможно ли как-то на чистом js это сделать, вдруг поможет? Не очень силен в js
    – mo link
    20 авг 2021 в 9:49
  • да, на чистом можно, но у вас есть вариант включить скрипт в html как <script> или вставить код в другой файл, который нормально подключается. могу на чистом переписать 20 авг 2021 в 9:50

1 ответ 1

0

Добавил реализацию 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>

1
  • Ошибку исправил, да, здесь работает, даже когда отдельно выносил например здесь jsfiddle.net/moiseev1788/m8q9ca1w/1 все работает, но при сборке он никак не реагирует. Может быть проблема в версии jquery?
    – mo link
    20 авг 2021 в 9:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.