Fading bootstrap navbar on scrolldown, while changing text color

Question

so I\'m working on a Ruby on Rails app with a design given to me which calls for the navigation bar to be transparent at the top of the page, and then fade into solid white afte

Answer 1

Simpler solution is to create a CSS class which you then add/remove on the scroll:

.navbar-fixed-top { background-color: rgba(255,255,255,1);transition: background-color 2s ease 0s;}
.navbar-fixed-top.opaque { background-color: rgba(255,255,255,0);transition: background-color 2s ease 0s;

}

Javascript:

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('.navbar-fixed-top').addClass('opaque');
    } else {
        $('.navbar-fixed-top').removeClass('opaque');
    }
});

Our website has a similar effect: www.kmo.com.au