NAVX

Remove the navigation transparency when scrolling

Remove the navigation transparency when scrolling down the page

Here's how to make the menu opaque by scrolling the page down. This can be useful for avoiding display problems when the navigation bar is fixed:

1 - Follow this tutorial and set up a fixed navigation bar.

2 - Add the class "navigation-transparent" on it.

<nav id="navigation" class="navigation fixed-top navigation-transparent">
    ...
</nav>

3 - Use the javascript code below to remove the class when scrolling down the page:

window.onscroll = function () {
    var scrollPosY = window.pageYOffset | document.body.scrollTop;
    if (scrollPosY > 50) {
        navigation.classList.remove("navigation-transparent");
    } else {
        navigation.classList.add("navigation-transparent");
    }
}

The result (scroll down):

See the list of tutorials for other ways to modify the navigation bar and add features.