Используя панель навигации WordPress и Bootstrap 4, я хочу добавить эффект, при котором панель навигации в верхней части страницы прозрачная, fadesOut при прокрутке вниз, fadeIn (с цветом фона) при прокрутке вверх, но до того, как он достигнет верхней части, исчезает фон.цвет к прозрачному.
Я использовал jQuery из этого примера , но я не знаю, как добавить «прежде чем я доберусь до верха, удалите цвет фона».
Пример кода:
$(function () {
var lastScrollTop = 0;
var $navbar = $('.navbar');
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop) { // scroll down
// use this is jQuery full is used
$navbar.fadeOut()
// use this to use CSS3 animation
// $navbar.addClass("fade-out");
// $navbar.removeClass("fade-in");
// use this if no effect is required
// $navbar.hide();
} else { // scroll up
// use this is jQuery full is used
$navbar.fadeIn()
// use this to use CSS3 animation
// $navbar.addClass("fade-in");
// $navbar.removeClass("fade-out");
// use this if no effect is required
// $navbar.show();
}
lastScrollTop = st;
});
});
Ближайший пример, который я обнаружил , использовал navbar и div для тренировки высоты прокрутки, чтобы внести изменения, но я не хочу полагатьсяпо идентификатору div.
//jQuery to collapse the navbar on scroll
var header_height = $('.navbar').height(),
intro_height = $('.intro-section').height(),
offset_val = intro_height + header_height;
$(window).scroll(function() {
var scroll_top = $(window).scrollTop();
if (scroll_top >= offset_val) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".navbar-fixed-top").removeClass("navbar-transparent");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".navbar-fixed-top").addClass("navbar-transparent");
}
});
Спасибо всем.