Effect on navbar bootstrap

Question

People would like to know how I do this animation of the header of this site https://blackrockdigital.github.io/startbootstrap-agency/ the effect of when I scroll down the page the header changes in size and color? Any help is welcome, thanks in advance!

Answer 1

There are several methods, you can use a function that when scrolling the page add a class to the background that was transparent, in this class you can insert a Transition in the CSS to give this effect.

Follow Javascript for this:

$(window).scroll(function(){ 
        var top = $(window).scrollTop();
        $timeout(function() {
            if(top > 0){
                $(".menu_fixo").addClass('fundo_preto');
            }else{
                $(".menu_fixo").removeClass('fundo_preto');
            }
        });
    });

In this black background, add css:

transition: all 0.2s ease;
background-color: #000;

For Logo to move to the side, add a class as well and in this padding and Transition class for that padding.

The following is a similar answer: https://stackoverflow.com/questions/24765155/shrinking-navigation-bar-when-scrolling-down-bootstrap3