NAVX

Navigation with animated height

Navigation with animated height when scrolling down

A good design feature is to place an animation at the height of the navigation bar, decreasing the height by scrolling the page down. Follow the steps below:

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

2 - Use this CSS code to define an initial height and a final height:

.navigation{
    height: 100px;
    transition: background .3s, height .3s;
}
.navigation-animated{
    height: 70px;
}

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

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

The result (scroll down):

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