How to change navbar css style on scroll?

Question

I'am doing a website with Bootstrap 4. The navbar´s background colour is transparent but when the user scroll down I want its background colour turn to white with a soft transition. Conversely, when the navbar retur I need its initial state. Something like this: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm

I have tried with pure javascript but the code doesn't work.

Thanks in advance!

javascript:

window.onscroll = function() {myFunction()};

function myFunction() {

    var navbarClass = document.getElementById("myNavbar").className.split(/\s+/);
    for (var i = 0; i < navbarClass.length; i++) {

        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            navbarClass[i].classList.add("border", "animate-top");
        } else if (navbarClass[i].classList.contains("nav")) {
            navbarClases[i].classList.toggle("nav-white");
        }
    }

}

CSS

.first > div {
    color: #fff;
}
section {
    height: 350px;   
}
.first {
    padding-top: 70px;
    background-image: url('https://picsum.photos/1920/1080/?random');
    height: auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.nav {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.5);
}
.nav-white {
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
}
.nav-white .navbar-brand {
    color: black;
}
.nav-white .navbar-nav li a {
    color: black;
}
.nav-white .fa.fa-navicon {
    color: black;
}
.border {
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.animate-top{
    animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
}

HTML NAVBAR

<nav class="navbar navbar-expand-lg fixed-top nav" id="myNavbar">
    <a href="#" class="navbar-brand">Menu</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menu de Navegacion">
        <span class="navbar-toggler-icon">
            <i class="fa fa-navicon"></i>
        </span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 1</a>
            </li>                   
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 2</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">TITLE 3</a>
            </li>
        </ul>
    </div>
</nav>

HTML

<section class="first row">
    <div class="col">                
        <h2>MAIN</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>      
</section>    

<section class="row">
    <div class="col">
        <h2>TITLE 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>

score 0 · Accepted Answer · answered Jan 09 '19 at 20:17

As you are using Bootstrap, you can take advantage of jQuery. The below code is what I do:

The jQuery toggles the scrolled class depending on the position and the scrolled class simply changes the color.

 $(document).scroll(function () {
    $(".fixed-top").toggleClass('scrolled', $(this).scrollTop() >  $(".fixed-top").height());
  });

.fixed-top.scrolled {
  background-color:rgba(255,255,255,1) !important;
  transition: background-color 200ms linear;
}

score 0 · Answer 2 · answered Jan 09 '19 at 20:20

0

What you have seems fine, except I don't see "position: fixed" anywhere, which would force the navbar to stay "stuck" at the top of the screen.

answered Jan 09 '19 at 20:20

Leroy Stav

722
4
12

The class fixed-top exists in bootstrap 4 with position fixed. – imvain2 Jan 09 '19 at 20:25
Thanks a lot @imvain2 this is just what I wanted, the navbar fixed at the top of the screen. – mau mca Jan 09 '19 at 21:03

How to change navbar css style on scroll?

2 Answers2