Переключающий класс в jQuery пропускает правило css

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть div id="header" с начальным правилом css: padding: 25px 0; . При прокрутке страницы вниз я хочу уменьшить заполнение этого div:

 $(document).ready(function() {
  var headerID = $("#header");
  $(this).scroll(function() {
    if (!$(this).scrollTop()) 
      headerID.toggleClass("headerScrolled");
    else if (!headerID.is(".headerScrolled")) 
      headerID.toggleClass("headerScrolled");
  });
});

 .headerScrolled {
  padding: 15px 0;
}

Однако, когда я прокручиваю страницу вниз, заполнение не меняется. Что не так с моим кодом?

Ответ №1:

Ваши два условия отменяют друг друга. Имеет смысл выполнить один вызов toggleClass() и предоставить логический аргумент, чтобы указать, следует ли добавлять или удалять класс на основе текущего scrollTop значения. Также обратите внимание, что вы должны прослушивать прокрутку на window вместо document . Попробуйте это:

 $(document).ready(function() {
  var $header = $("#header");

  $(window).scroll(function() {
    $header.toggleClass('headerScrolled', $(this).scrollTop() !== 0);
  });
});

 html,
body {
  height: 1000px;
  margin: 0;
}

#header {
  padding: 25px 0;
  background-color: #CCC;
  width: 100%;
  position: fixed;
}
#header.headerScrolled {
  padding: 15px 0;
}

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

1. Это решение будет продолжать переключать headerScrolled класс в заголовке по мере прокрутки содержимого

2. Это не так. Я добавил фрагмент для демонстрации

3. Как обычно, потрясающе, никогда не знал, что вы можете передать bool в toggleClass, с этого момента многое станет намного проще!

4. То же самое. Пожалуйста, отредактируйте это, чтобы включить инструкции по использованию метода прокрутки window вместо this , и я проголосую за и удалю свой ответ.

5. Вам нужно сделать .headerScrolled селектор более конкретным, чтобы переопределить любой существующий стиль элемента. Вот почему я включил #header в этот селектор.

Ответ №2:

Используйте .scroll() метод на window , а не this или document на. Кроме того, это может быть проще в использовании .addClass() и .removeClass() в этом случае.

 $(document).ready(function() {

  var $header = $("#header");

  $(window).scroll(function() {
    if (!$(window).scrollTop()) {
      $header.addClass("headerScrolled");
    } else {
      $header.removeClass("headerScrolled");
    }
  });

});