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

Something like this might help:

window.addEventListener("scroll", function() {
    if (window.scrollY > 500) {
        $('.navbar').fadeOut();
    }
    else {
        $('.navbar').fadeIn();
    }
},false);

Change 500 with however many pixels from the top the place is that you want to do the fadeOut at.

Answer 2

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

Answer 3

This is great. For newbies, for the opaque class, I did the following:

.navbar-default {
  min-height: 120px;
  opacity: 0;
  transition: opacity .5s;
}
.opaque {
  opacity: 1;
  transition: opacity .5s;
}

Change the fade time under the transition attribute. This doesn't work for all browsers but it looks great for now.