Making a smooth transition

Question

I would like to know how to make the transition of this navbar look smoother

Javascript code used to perform it:

        var clientHeight = document.getElementById('header').clientHeight;
        $(function(){
            $(window).scroll(function(){
                if ($(this).scrollTop() > clientHeight)
                {
                    $('#navigation-bar').addClass('navbar-fixed-top');
                } else {
                    $('#navigation-bar').removeClass('navbar-fixed-top');  
                }
            });
        });

Answer 1

The first alternative that came to mind was to use the property animation of CSS. You will apply an animation to the class .navbar-fixed-top so that it gently appears.

Probably this class is assigning the position: fixed; right? You’ll need to add two more properties:

opacity: 0;
animation: navbar .5s linear forwards;

And also the animation:

@keyframes navbar {
  100% { opacity: 1; }
}

I made an example of how it will look: DEMO

Maybe they have other alternatives, but all I could think about was this one. : P