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 after scrolling down past a certian <section> on the page, at the same time, the navbar link text is white at the top, and will fade to grey at the same <section>.

I've looked into JavaScript that changes opacity on scrolldown, but I haven't had success getting it to work. I'd imagine that the same function(s) to fade in the navbar to white, would also work with the navbar links fading to grey as well.

I've also looked into the .affix js [plugin on Bootstrap, but I don't know very advanced javascript to modify it to my needs. In case it's helpful, the navbar's structure in my the app's view starts as:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <%= image_tag "logo-small.png" %>
      </a>

... "render partial" lines depending on if the user is logged in or not ...

Any and all help is appreciated! I'd really love to get this design working, and I've done most of it already, this particular part has me stumped. Any help is appreciated!

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.