Secondary Navigation Tweaks

Hi there,

this CSS:

#secondary-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
#secondary-navigation.is-visible {
	opacity: 1;
}
#secondary-navigation.is-hidden {
	opacity: 0;
	pointer-events: none;
}
body {
    margin-bottom: 60px; /* height of secondary nav */
}

And this Javascript:

<script type = "text/javascript">

let scrollPos = 0;
const nav = document.querySelector('.secondary-navigation');

function checkPosition() {
    let windowY = window.scrollY;
    if (windowY < scrollPos) {
        // Scrolling UP
        nav.classList.add('is-visible');
        nav.classList.remove('is-hidden');
    } else {
        // Scrolling DOWN
        nav.classList.add('is-hidden');
        nav.classList.remove('is-visible');
    }
    scrollPos = windowY;
}

window.addEventListener('scroll', checkPosition);

</script>

Thanks, David. While the above CSS did move the secondary navigation to the bottom, it did not achieve the point I mentioned.

2. How to make it sticky only while scrolling up?

I just want it to appear only while the user is scrolling up and not while scrolling down. :)

Requires some more CSS and some Javascript - edited code here

Thanks, David. You are a star! :)

You're welcome