I am currently working on a website using Bootstrap 4. The goal is to create a navbar with a transparent background that transitions to white smoothly when the user scrolls down. I want the navbar to return to its initial state when the user scrolls back up. A similar effect can be seen in the following example: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
I attempted to achieve this effect using pure JavaScript, but the code did not work as expected.
Thank you in advance for any assistance!
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="Navigation Menu">
<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>