Set Bootstrap navbar transparency on scroll

Question

I use a secondary fille called custom.css to overwrite the bootstrap code and I would like to know how to create a code that is activating only when the visitor of my site is not in the very top of the page.

Until now I created a transparent navbar using the default code provided by bootstrap. The only thing I have to do is to set it to execute: background-color: #color when the visitor is scrolling down.

Example: https://www.lyft.com/

When I am in the top of the page, the navbar is transparent, but when I scroll down it becomes opaque.

Welcome to SO! `:)` What have you tried so far? Can you post your code? Lyft uses javascript to achieve that effect I believe. — David Passmore, Apr 15 '15 at 09:44
I copied the original bootstrap for .navbar-default (if you need it, I can provide it to you) and I modified the colors. In HTML I set the bar to be top fixed (using navbar-fixed-top). I haven't done anything else except searching for something that might help... I will look into lyft, maybee I will find something usefull. EDIT: when I used "look into lyft" I meant looking into their css. — Hiperkie, Apr 15 '15 at 09:53
Lyft uses `angular-js` and adds the class `.opaque` to the navbar once the user scrolls to a certain point down the page. — David Passmore, Apr 15 '15 at 10:08
Thank you! I will look into it and try to learn how to use it :) — Hiperkie, Apr 15 '15 at 10:15

score 39 · Accepted Answer · edited Jul 30 '17 at 17:51

Ok you need the following code to achieve this effect: (I am going to use jQuery as it is the bootstrap supported language).

jQuery:

/**
 * Listen to scroll to change header opacity class
 */
function checkScroll(){
    var startY = $('.navbar').height() * 2; //The point where the navbar changes in px

    if($(window).scrollTop() > startY){
        $('.navbar').addClass("scrolled");
    }else{
        $('.navbar').removeClass("scrolled");
    }
}

if($('.navbar').length > 0){
    $(window).on("scroll load resize", function(){
        checkScroll();
    });
}

You can also use ScrollSpy to do this.

and your CSS (example):

/* Add the below transitions to allow a smooth color change similar to lyft */
.navbar {
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.navbar.scrolled {
    background: rgb(68, 68, 68); /* IE */
    background: rgba(0, 0, 0, 0.78); /* NON-IE */
}

I wasn't able to start it. I think because the bar is allready fixed on top. I will modify the script to watch another class. I think this will solve the problem. — Hiperkie, Apr 15 '15 at 11:03
using here with Bootstrap 4 in a Blazor project and it worked smoothly — Antonio Correia, Sep 04 '19 at 03:37

score 0 · Answer 2 · edited Jan 24 '19 at 10:16

0

$(document).ready(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > height) { 
           $('.navbar').addClass('scrolled');
       } else {
           $('.navbar').removeClass('scrolled');
       }
    });
});

edited Jan 24 '19 at 10:16

Axifive

1,159
2
19
31

answered Jan 24 '19 at 08:38

saad

1

1

Could you elaborate on how this fixes the problem? Your code might be correct, but you need to accompany it with good explanation. – maazadeeb Jan 24 '19 at 11:26

score 0 · Answer 3 · answered Nov 27 '20 at 00:10

To avoid the performance hit of using the scroll, load and resize events, you can now use the Intersection Observer API.

It will allow you to detect if the content on your page has been scrolled, and set the nav bar transparency accordingly (by adding or removing a class).

Have a look at this answer for more details.

Set Bootstrap navbar transparency on scroll

3 Answers3

Linked