Make a smoother transition

Question

Make a smoother transition

Navigation

#1 by (0 votes)

0

I would like to know how to let the transition of this navbar with a smoother appearance

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');  
                }
            });
        });

javascript css

asked by anonymous 16.06.2017 / 04:32

1 answer

(Android Studio) Problems with OnRestart eating the main interface Group By | Relationship Many To Many Laravel 5

score 0 · Answer 1

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

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

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

And also the animation:

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

I gave an example of how it will look: DEMO

Maybe you have other alternatives, but I could only think of this one. : P