Как добавить класс при обновленные страницы?

У меня на сайте есть хедер, и при прокрутке страницы вниз, он прячется. А при прокрутке страницы вверх я его показываю.

$(function () {
  var lastScrollTop = 0,
    delta = 15;
  $(window).scroll(function (event) {
    var st = $(this).scrollTop();
    if ($(window).scrollTop() > 50) {
      $("header").addClass("active");
    } else {
      $("header").removeClass("active");
    }
    if (Math.abs(lastScrollTop - st) <= delta) return;
    if (st > lastScrollTop && lastScrollTop > 0) {
      $("header").css("top", "-146px");
    } else {
      $("header").css("top", "0px");
    }
    lastScrollTop = st;
  });
});


header {
    width: 100%;
    position: fixed;
    top: 0;
    transition: .5s;
    z-index: 99;
}

header.active {
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 4%) 0px 4px 4px;
}


Но если я, например, прокручу до половины страницы и обновлю сайт, то у меня хедер будет без класса .active
Как добавить этот класс для header при обновленные страницы, если пользователь находится ниже чем 150px от верха экрана?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
функцию, которая внутри $(window).scroll() объявите выше. И вызовите ещё 1 раз явно, не по событию.
spoiler
$(function () {
  function onScroll(event) {
    var st = $(this).scrollTop();
    if ($(window).scrollTop() > 50) {
      $("header").addClass("active");
    } else {
      $("header").removeClass("active");
    }
    if (Math.abs(lastScrollTop - st) <= delta) return;
    if (st > lastScrollTop && lastScrollTop > 0) {
      $("header").css("top", "-146px");
    } else {
      $("header").css("top", "0px");
    }
    lastScrollTop = st;
  }

  var lastScrollTop = 0,
    delta = 15;
  $(window).scroll(onScroll);

  onScroll();
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
v3shin
@v3shin
А гуглить пробовали?
$(window).scroll(
   // bla-bla-bla
).scroll();
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы