JS: Add/Remove Class When Nav Scrolls Up/Down

When designing sites we sometime want to add animations to the navigation menu when it moves from its static state to fixed state that scrolls with the page. The below code will add/remove classes based on if the user scrolls up or down and will animate the menu to either move up or move down.

You will have to change the element number based on your current website build in this example the element numbers are: 56b1baf and 3333ee3, these will need updating.

JS Code For This Functionality

/* Header Scroll Start */
var lastScrollTop = 0;
var counter = 1;
window.addEventListener("scroll", function(){
    var st = window.pageYOffset || document.documentElement.scrollTop;

    if (st > lastScrollTop){
        jQuery('.elementor-element-56b1baf.elementor-sticky--active').removeClass('scroll-up animate__slideInDown');
        jQuery('.elementor-element-3333ee3.elementor-sticky--active').removeClass('scroll-up animate__slideInDown');
        jQuery('.elementor-element-56b1baf.elementor-sticky--active').addClass('scroll-down animate__animated animate__slideOutUp');
        jQuery('.elementor-element-3333ee3.elementor-sticky--active').addClass('scroll-down animate__animated animate__slideOutUp');
    } else {
        jQuery('.elementor-element-56b1baf.elementor-sticky--active').removeClass('scroll-down animate__slideOutUp');
        jQuery('.elementor-element-3333ee3.elementor-sticky--active').removeClass('scroll-down animate__slideOutUp');
        jQuery('.elementor-element-56b1baf.elementor-sticky--active').addClass('scroll-up animate__slideInDown');
        jQuery('.elementor-element-3333ee3.elementor-sticky--active').addClass('scroll-up animate__slideInDown');
    }

    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
/* Header Scroll End */

CSS Code For This Functionality

.mobile-inner-container {
	animation-duration: 0.3s !important;
}

.elementor-element-3333ee3.elementor-sticky--active.scroll-up,
.elementor-element-56b1baf.elementor-sticky--active.scroll-up {
    margin-top: 15px !important;
	animation-duration: 0.3s !important;
	top: 0px !important;
}

.elementor-element-56b1baf.elementor-sticky--active.scroll-down,
.elementor-element-3333ee3.elementor-sticky--active.scroll-down {
    margin-top: -15px !important;
	animation-duration: 0.3s !important;
}