Its_ToXiiC Its_ToXiiC - 2 months ago 10
CSS Question

Animated navigation bar

I'm wonder how to make a navigation bar animate when you scroll down some. One example I know is FlatIcon. I just need to know how to get the website to recognize when the person scrolls down. I can do the animating myself

Answer

Suppose you want to change your Menu height after user scroll more than 90 pixel

JAVA SCRIPT CODE

//ONSCROLL FUNCTION TO HIDE MENU
function hideMenu(){
    var mouseX = window.scrollY;
    var menu = document.getElementById("pageHeader");
    if(mouseX > 90){
        menu.style.height = "50px";
        menu.style.transition = "height 1s"; /*This is Optional */
    }else {
        menu.style.height = "100PX";
        menu.style.transition = "height 1s";
    }
}
window.addEventListener("scroll",hideMenu);

CSS CODE. IT IS SIMPLE JUST FOR UNDERSTAND

<style>
#pageHeader {
height: 100px;
}
</style>

HTML CODE

<div id="pageHeader">
<!-- HERE IS YOUR MENU ITEMS OR THEIR CONTAINER... -->
</div>

In this code this function hideMenu() always starts when user scroll down your page. When they scroll down more than 90px the height of your menu is 50px. You can add more Effects by using if else condition... Hope this will help you. If you have further question comment them..