Set Bootstrap Navbar Transparency on Scroll

Set Bootstrap navbar transparency on scroll

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 */
}

Bootstrap4 NavBar, Transparent on scroll down, bg-colour on scroll up but back to transparent before the top

The example You've found is using Bootstrap 3, please note that there are major differences between Bootstrap 3 and Bootstrap 4.

In bootstrap 4 you can add classes like .sticky-top to make your Navbar sticky and .bg-transparent to make it transparent.

Here is a working example:

(function ($) {
    var navbar = $('.navbar');    var lastScrollTop = 0;
    $(window).scroll(function () {        var st = $(this).scrollTop();        // Scroll down        if (st > lastScrollTop) {            navbar.fadeOut();        }         // Scroll up but still lower than 200 (change that to whatever suits your need)        else if(st < lastScrollTop && st > 200) {            navbar.fadeIn();            navbar.removeClass('navbar-light bg-transparent').addClass('navbar-dark bg-custom');        }        // Reached top        else {            navbar.removeClass('navbar-dark bg-custom').addClass('navbar-light bg-transparent');        }        lastScrollTop = st;    });
})(jQuery);

/* For testing purposes */body {    height: 2000px;}
/* Set your background color */.bg-custom {    background-color: #333}/* Transition effect */.navbar {    -webkit-transition: all .3s ease 0s;    transition: all .3s ease 0s;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><nav class="navbar navbar-expand-lg sticky-top navbar-light bg-transparent">    <a class="navbar-brand" href="#">Navbar</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"        aria-expanded="false" aria-label="Toggle navigation">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collapse navbar-collapse" id="navbarSupportedContent">        <ul class="navbar-nav mr-auto">            <li class="nav-item active">                <a class="nav-link" href="#">Home                    <span class="sr-only">(current)</span>                </a>            </li>            <li class="nav-item">                <a class="nav-link" href="#">Link</a>            </li>            <li class="nav-item dropdown">                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"                    aria-expanded="false">                    Dropdown                </a>                <div class="dropdown-menu" aria-labelledby="navbarDropdown">                    <a class="dropdown-item" href="#">Action</a>                    <a class="dropdown-item" href="#">Another action</a>                    <div class="dropdown-divider"></div>                    <a class="dropdown-item" href="#">Something else here</a>                </div>            </li>            <li class="nav-item">                <a class="nav-link disabled" href="#">Disabled</a>            </li>        </ul>    </div></nav>

Transparent navbar to visible when scrolling

Ok, I'm gonna throw you a bone here JSFiddle:

$(document).on('scroll', function (e) {
    $('.navbar').css('opacity', ($(document).scrollTop() / 500));
});

Magic number alert: 500 is the divider for the scrollTop, the lower the number the faster the opacity goes above 1 (opacity should be between 0 and 1.

So what this code does is listen to scrolling on the document and set the opacity of the navbar according to the scroll position.

Hope this helps!

Navbar changing from transparent to black on scroll / resize - load?

The issue is class navbar-inverse in your div.

bootstarp applies blackbackground color on the element where this class is used.

you should remove this class from html and use the below code in script.

Hope this helps.

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

updated snippet

function checkScroll() {    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
    if ($(window).scrollTop() > startY)     {       $(".navbar").fadeIn(1, function() {         $(this).css({opacity: 1.0});          $(this).addClass("navbar-inverse")       });    }    else     {      $(".navbar").fadeIn(1000, function() {        if($(window).scrollTop() <= startY)        {        $(this).fadeOut(1000, function()          {           $(this).css({opacity: 1.0});            $(this).removeClass("navbar-inverse")        });        }
       });    }}
if ($('.navbar').length > 0) {    $(window).on("scroll load resize", function () {        checkScroll();    });}

body {  height:1000px;    }
.btn-gs {    background: blue;    border: 2px solid blue;    padding: 5px 23px !important;    border-radius: 25px;    font-weight: 500;    letter-spacing: 1px;    margin-top: 25px;    color: #fff !important;    text-transform: uppercase;
}

.navbar-alt {    height: 80px;}
.navbar-brand-alt {    padding: 0;}
.navbar-signup {    margin-top: 3px;    margin-left: 10px;}
.navbar-right-alt {    position: static !important;    padding-top: 20px !important;
    a {        color: #fff !important;        font-size: 16px !important;        text-transform: uppercase;
        &:hover {            color: darken(@blue,10%) !important;        }    }}
.navbar.navbar-inverse {    background: transparent;    transition: all .5s linear;    border: none !important;}
.navbar.navbar-inverse.scrolled {    background: black;}

<!DOCTYPE html><html lang=""> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Title Page</title>  <!-- Bootstrap CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">       </head> <body>      <div class="navbar  navbar-alt navbar-fixed-top scrolled">        <div class="container">            <div class="navbar-header">                    <a href="#" class="navbar-brand navbar-brand-alt">                                            </a>            </div>            <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#my-navbar-collapse" aria-expanded="false">                <span class="sr-only">Toggle Navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>            <div class="navbar-collapse collapse" id="my-navbar-collapse" aria-expanded="false" style="height:1px;">                <ul class="nav navbar-nav navbar-right navbar-signup">                    <li>                        <a href="#" class="btn-gs">                            <i class="fa fa-paper-plane-o"></i>                            Free Trial                        </a>                    </li>                </ul>                <ul class="nav navbar-nav navbar-right navbar-right-alt">                    <li>                        <a href="#home">Home</a>                    </li>                    <li>                        <a href="#features">Features</a>                    </li>                    <li>                        <a href="#faq">FAQ</a>                    </li>                    <li>                        <a href="#pricing">Pricing</a>                    </li>                </ul>            </div>        </div>    </div><section class="page-section page-section-xlg bs-bg" id="home">    <div class="container">        <div class="row wrap wrap-alt">            <div class="col-md-offset-6 col-md-6">                <h1 class="text-white heading-responsive largest">LOREM IPSUM</h1>                <h4 class="subheading subheading-md subheading-md-white thin">LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.</h4>                <br />                <a href="#" class="btn-gs btn-gs-lg text-normalize">                    <i class="fa fa-paper-plane-o"></i>                    Free Trial                </a>            </div>        </div>    </div></section>
  <script src="http://code.jquery.com/jquery.js"></script>  <!-- Bootstrap JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body></html>

How to change Bootstrap navbar color on scroll in React.js?

I Just tested this, and it worked fine.

const [navBackground, setNavBackground] = useState(false)
    const navRef = useRef()
    navRef.current = navBackground
    useEffect(() => {
      const handleScroll = () => {
        const show = window.scrollY > 50
        if (navRef.current !== show) {
          setNavBackground(show)
        }
      }
      document.addEventListener('scroll', handleScroll)
      return () => {
        document.removeEventListener('scroll', handleScroll)
      }
    }, [])

In your Navbar, remove bg="light"

 <Navbar expand="sm" fixed="top" style={{ transition: '1s ease',backgroundColor: navBackground ? 'black' : 'transparent'}}>

Set Bootstrap Navbar Transparency on Scroll