@patsooo
У меня на сайте есть хедер, и при прокрутке страницы вниз, он прячется. А при прокрутке страницы вверх я его показываю.
$(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 от верха экрана?
Решения вопроса 1
@sergiks
функцию, которая внутри
$(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
$(window).scroll(
// bla-bla-bla
).scroll();