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

Question

[Анастасия]

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

$(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 от верха экрана?

Answer 1

[Сергей Соколов]

функцию, которая внутри $(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();
});

Answer 2

[v3shin]

$(window).scroll(
   // bla-bla-bla
).scroll();