how to gradually turn the background opacity of a bootstrap navbar into a solid color

css, twitter-bootstrap-3

Solution

Not necessarily what you are looking for, but you could try something like in this fiddle. If you look in the console while scrolling down, you will see the distance from the top as it changes. You can just check the distance and then simply change the class of the menu.

The JS would be something like:

$(window).scroll(function(){
    var posTop = $(window).scrollTop() - $('.container').offset().top
    console.log('from .container: '+posTop+' | from top of page: '+$(window).scrollTop());
}).trigger('scroll');

Edit: you edited the question and made it more specific, my answer doesn't really apply for what you're asking now.

Later edit: the effect seems to be done from JavaScript, as I suggested. If you look in `greyscale.js` you can find:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

at the very top of the file. Basically it says that whenever a user scrolls, it checks whether it got 50px lower than the top. If it has, it changes the class of the `nav` to `top-nav-collapse`. The smoothing effect comes from CSS, however.

Problem

The effect that I'm trying to comprehend is used in the Start Bootstrap Grayscale Template. This is a bootstrap 3.0 implementation. As you scroll down, the nav area quickly but smoothly changes its color. I'd like to bring this awesome feature into yamm's mega menu. http://geedmo.github.io/yamm/ But before I can do that, I must comprehend the overall idea. Could someone shed some light on this? The styles that deal with the nav area is as follows; ``` .navbar { margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.3); text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; background-color: #000; } .navbar-brand { font-weight: 700; } .navbar-brand:focus { outline: 0; } .navbar-custom a { color: #fff; } .navbar-custom .nav li a { -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; } .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus, .navbar-custom .nav li.active { outline: 0; background-color: rgba(255,255,255,.2); } .navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff; } .navbar-toggle:focus, .navbar-toggle:active { outline: 0; } @media(min-width:767px) { .navbar { padding: 20px 0; border-bottom: 0; letter-spacing: 1px; background: 0 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; } .top-nav-collapse { padding: 0; background-color: #000; } .navbar-custom.top-nav-collapse { border-bottom: 1px solid rgba(255,255,255,.3); } } ``` I'm curious to know which sections are responsible for this effect.

Original source