I am currently working with a piece of code that dynamically adds and removes the classes .nav-down and .nav-up to #nav based on the user's scrolling behavior.
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 150);
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');
}
lastScrollTop = st;
}
});
My goal now is to include an additional class called .extra to #nav when the function adds .nav-down to #nav. However, I only want this extra class to be added when the user is at the top of the page, and not at any other point. This means it should only be added when the user is at the very top of the page.