I have a slider on the page when the slides are automatically switched, its height changes. This for some reason triggers a scroll event. I want the scroll event to only work when the user physically interacts with the page (scrolls it), not when the height of an element on the page changes dynamically.
// Before
function scrollShowHideHeader() {
var position = $(window).scrollTop();
$(window).on('scroll', function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#site-header').addClass('is-hidden');
} else {
$('#site-header').removeClass('is-hidden');
}
position = scroll;
});
}
// After
function scrollShowHideHeader() {
let position = $(window).scrollTop();
let prevPageHeight = $('#site-content').outerHeight();
$(window).on('scroll', () => {
let scroll = $(window).scrollTop();
let lastPageHeight = $('#site-content').outerHeight();
if (lastPageHeight === prevPageHeight) {
if (scroll > position) {
$('#site-header').addClass('is-hidden');
} else {
$('#site-header').removeClass('is-hidden');
}
position = scroll;
}
prevPageHeight = lastPageHeight;
});
}
function scrollShowHideHeader() {
let position = $(window).scrollTop();
let prevPageHeight = $('#site-content').outerHeight();
$(window).on('scroll', () => {
let scroll = $(window).scrollTop();
let lastPageHeight = $('#site-content').outerHeight();
if (lastPageHeight === prevPageHeight) {
if (scroll > position) {
$('#site-header').addClass('is-hidden');
} else {
$('#site-header').removeClass('is-hidden');
}
position = scroll;
}
prevPageHeight = lastPageHeight;
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.