When a slider on the page automatically switches slides and changes its height, it causes a scroll event to trigger unexpectedly. I want to modify the scroll event so that it only activates when the user physically interacts with the page by scrolling, rather than when an element's height changes dynamically.
// Prior to changes
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 making modifications
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;
});
}