[Resolved] Secondary Navigation Tweaks

[Vish]

Hello 🙂

How to:

1. Display the Secondary Navigation at display at the bottom of the screen (not page).
2. How to make it sticky only while scrolling up?

Thank you!

[David]

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>

[Vish]

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. 🙂

[David]

Requires some more CSS and some Javascript – edited code here

[Vish]

Thanks, David. You are a star! 🙂

[David]

You’re welcome

[Author]

Posts