У меня есть меню, которое анимируется в виде (сверху), когда пользователь прокручивается вверх. И анимируется (за пределами экрана), когда пользователь прокручивается вниз. Тем не менее, я хочу, чтобы фон навигации был черным, когда пользователь находится в верхней части страницы, и белый, когда они находятся на некотором расстоянии от вершины.изменение фонового цвета меню, когда в верхней части экрана
HTML-фрагмент (рабочий код)
...
function hasScrolled() {
if($(window).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
HTML
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>
CSS
#s-nav {
position: fixed;
z-index: 999;
background-color: #fff;
top: 0; left: 0;
width: 100%;
transition: top 0.5s ease;
}
#s-nav.nav-up { top: -75px; }
Можете ли вы предоставить любую рабочую 'snippet' или' fiddle'? –
Большая часть контента создается через wordpress. Snippet не распознает код, когда я пытаюсь использовать – user3550879
, поскольку вы переключаете классы во время прокрутки, тогда вы можете использовать эти классы для переключения 'bg-color'. –