Заголовок прокрутки

Question

Мне нужно изменить стиль моего заголовка, но это если условие не работает и регистрировать только (false) в моей консоли и ничего не менять, поэтому мне было интересно, есть ли проблема в моем синтаксисе или моемлогика. обратите внимание, что в моей консоли нет ошибок.

$(document).ready(function() {
  var header = $(".hotel-header");
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    header.addClass("hotel-header-scroll");
    console.log("true");
  } else {
    header.removeClass("hotel-header-scroll");
    console.log("false");
  }
});

Answer 1

Поскольку вы используете этот метод, когда документ готов, возникает ошибка из-за того, что страница загружает прокрутку заголовка менее 200, поэтому в противном случае выполняется условие. Я изменил $(document).ready(function() на $(window).scroll(function() эта функция вызывается, когда пользователь прокручивает страницу. Затем вызывается метод, который проверяет прокрутку и возвращает истину или ложь в зависимости от вашего состояния. Ниже приведен рабочий пример

$(window).scroll(function() {
  var header = $(".hotel-header");
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    header.addClass("hotel-header-scroll");
    console.log("true");
  } else {
    header.removeClass("hotel-header-scroll");
    console.log("false");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hotel-header"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>hi</h1>

Добавлен <br> для прокрутки некоторого контента.