How to make boostrap navigation change color when scrolling?

Question

I'm building a website template using Bootstrap. I would like to have the navigation be transparent when the user loads the page and he/she is looking at the top of the page. The header is dark so a transparent navigation looks much better. But, I would like when the user starts scrolling down, for the navigation to darken so the navigation links become visible under the light backgrounds. I've looked at several other templates for some guidance, but I'm still having trouble trying to implement this in to my own template. I've seen some people use javascript/jquery, but I'm not too good with javascript, and don't know how to achieve that. Any help is really appreciated!

score 2 · Answer 1 · answered Sep 10 '16 at 03:50

Try the following:

$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

This will toggle the class after the user scrolls 50 px if you want to change it just change the 50 to the amount of px down you want the class to be toggled.

Then the css if you are using bootstraps navbar structure it will look like the following with a fade transition:

.navbar-default{
  transition:500ms ease;
  background:transparent;
}
.navbar-default.scrolled{
  background:#000;
}

Here is a fiddle to show you this working Fiddle Demo

score 0 · Answer 2 · answered Sep 10 '16 at 03:13

0

$(window).scroll(function() {
  var $nav = $('#nav'),
    scroll = $(window).scrollTop();
  if (scroll >= 34) {
    $nav.addClass('dark-background');
  } else {
    $nav.removeClass('dark-background');
  }
});

.dark-background {
  background-color: gray;
}
#nav {
  background-color: transparent;
}

answered Sep 10 '16 at 03:13

Mehrad

1,495
14
22

This answer may actually suit your needs better as it doesn't reset when the scroll stops. – Shiyason Sep 10 '16 at 03:34

score 0 · Answer 3 · edited May 23 '17 at 10:29

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $("body").css('background-color', 'red')
    $.data(this, 'scrollTimer', setTimeout(function() {
        $("body").css('background-color', 'white')
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

body {
height: 5000px;
width: 100px;
overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<body></body>

Credit goes to this answer:

jQuery scroll() detect when user stops scrolling

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $("body").css('background-color', 'red')
    $.data(this, 'scrollTimer', setTimeout(function() {
        $("body").css('background-color', 'white')
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

Just to break down what is happening:

1) Attaches a scroll event listener on the window object. And passes it a function to execute on that event.

$(window).scroll(function(){})

2) clearTimeout goes hand in hand with setTimeout. if you open the browser's developer console and type

$(window).data()

it should return an empty object as you may not have assigned anything to it yet. Now, if you type

$(window).data('myData', 'my_value')
$(window).data() //=> returns an -> Object {myData: "my_value"}

you can also access the data of the an element like this $.data(element):

$.data(window) //=> returns an -> Object {myData: "my_value"}

The first call to #clearTimeout is called on an empty attribute because scrollTimer hasn't been assigned to the window.data() object yet.

3) Set your element's color. In this case, I am using the body as example but you will want to input the correct selector:

$('body').css('background-color', 'red')

4) use the #setTimeout function to return the original color after the time has elapsed.

$.data(this, 'scrollTimer', setTimeout(function() {
    $('body').css('background-color', 'white')
    console.log("Haven't scrolled in 250ms!");
}, 250));

the this inside the function, represents the window:

$.data(this, 'scrollTimer', setTimeout(function() {...}, 250)

is the same as:

$.data(window, 'scrollTimer', setTimeout(function() {...}, 250)

it is accessing the data in the window object

PS: for the snippet to work, you may have to go full screen

Carol Skelly · Answer 4 · 2018-08-31T15:10:51.180

Bootstrap 4

The affix component no longer exists on Bootstrap 4, but the ScrollSpy component does.

https://www.codeply.com/go/aN4tfy0zU0

Bootstrap 3

You can also use the Bootstrap Affix component to watch the scroll position instead of extra jQuery/JavaScript. Just define the .affix-top and .affix CSS for the navbar.

@media (min-width:768px) {
    .affix-top {
      /* navbar style at top */
      background:transparent;
      border-color:transparent;
      padding: 15px;
      -webkit-transition:all 0.5s ease;
      -moz-transition:all 0.5s ease; 
      -o-transition:all 0.5s ease;         
      transition:all 0.5s ease;  
    }
}

and set the position you want the navbar to change style (ie; 400px from the top)

<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">

Working Demo: http://www.codeply.com/go/xp2fY6sVHP

How to make boostrap navigation change color when scrolling?

4 Answers4

Bootstrap 4

Bootstrap 3