Menu Fixed With Animation

========================

HTML

<div id="main-menu"></div>

main-menu id add in menu section

==========================

CSS

.fixed{  /* To fix main menu container */

    z-index: 9999;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    animation-name: up;

    animation-duration: 0.5s;

    animation-iteration-count: 1;

    padding-bottom: 10px;

    box-shadow: 4px 4px 4px #ececec;

    transition: all 0.5s;

}

.fixed .anima{

    animation-name: up;

    animation-duration: 0.5s;

    animation-iteration-count: 1;

    border-bottom: 1px solid #c7c5c5;

    padding-bottom: 5px;

}

@keyframes up{

    0%{

        transform: translateY(-100%);

    }

    100%{

        transform: translateY(0%);

    }

}

======================

JS

$(window).bind('scroll', function () {

    if ($(window).scrollTop() > 120) {

        $('#main-menu').addClass('fixed');

    } else {

        $('#main-menu').removeClass('fixed');

    }

});