Make the Bootstrap Navbar Sticky

Question

So I want to make a Navbar using Bootstrap then when you scroll down past 150 pixels the navbar has a background that is slightly transparent all the examples I have found for this on Stackoverflow haven't been what I need :/ I know how to add classes and so on with jQuery and when you scroll down pass a certain height but I want the Navbar to fadeOut and then fadeIn with a different class but I haven't found a way to do this.

I am grateful for any help :)

Thanks,
Ste

Answer: jQuery

$(window).on( "scroll", function() {
   $('nav').toggleClass('scrolled navbar-fixed-top', $(this).scrollTop() > 150);
});

CSS

nav.scrolled {
  background: rgba(0,0,0,0.5);
}

nav {
    transition: background-color 0.5s ease;
}

HTML

<nav id="secondNav" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">Responsive Slider</a>
            </div>
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right navText">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 1

You can do the fading with just css transitions all you need to do is use jquery toggleClass function when the window reaches 150px.

Try the following:

$(window).on( "scroll", function() {
   $('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});

and the css

#secondNav.navbar-default{
  background: #000;
  transition: background-color 0.5s ease;
}
#secondNav.scrolled {
  background: rgba(0,0,0,0.5);
}

The transition property is what will give you the fade in and out and then you can change the background of the navbar-default to whatever you want it to be. When it reaches 150px it will toggle the scrolled class and change the background.

Answer 2

I have a difficult solution. You can create two navbar . second nav should be hidden. when you scroll more than 150px , then it should be fade in with fixed position. Below my jQuery code is

$(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if(scrolled>149){
       $('#second_nav').fadeIn();
    }
    else{
        $('#second_nav').fadeOut();
    }
});

Below the code is first nav.

<nav class="navbar navbar-default">

And below the code is second nav.

<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">

Check my live demo on jsfiddle

Answer 3

Are you using jQuery? if so, maybe something like this?

$('#div').click(() => {
    $('#div').fadeOut();


  $('#div')
  .css('background-color', 'green')
  .fadeIn();

});

https://jsfiddle.net/53n2o76g/