Have Bootstrap 4 fixed Navbar slide down and become solid color on scroll

Question

I have been using themes for the majority of my HTML/CSS life, and they mostly all had this built in before and now that I am starting from scratch I am at a bit of a loss trying to replicate it.

As you can see I have an really cool fixed transparent nav bar that works exactly as I'd want for the hero image, but once I start scrolling it becomes unreadable due to the transparent background.

I not only want to make it opaque on scroll, but I would like to make it slide out like in this example: https://inspirothemes.com/polo/index.html - how do I do this? I'd like to take advantage of Bootstrap 4.6 as much as possible.

 .nav-item a { text-decoration: none; outline: none; color: #ffffff; opacity: 1; font-weight: 600; font-size: .85em; }.nav-item a:hover { opacity: 0.5; transition: opacity.2s ease-out; -moz-transition: opacity.2s ease-out; -webkit-transition: opacity.2s ease-out; -o-transition: opacity.2s ease-out; }.hero { width: 100%; height: 90vh; background: url('https://www.fillmurray.com/800/600'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm fixed-top"> <a class="navbar-brand ml-4" href="#"> <img src="http://via.placeholder.com/50x30" alt="" width="50" height="30" class="d-inline-block align-top"> </a> <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span> </span> <span> </span> <span> </span> </button> <div class="collapse navbar-collapse text-right" id="navbarsExample04"> <ul class="navbar-nav ml-auto mr-4 text-uppercase"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Clients</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <main role="main"> <section class="hero"> <div class="container-fluid"> </div> </section> <section class="main"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum luctus purus, quis ultrices ante porttitor a. Aenean nec eros neque. Etiam pretium dui in mollis placerat. Duis at imperdiet neque. Etiam bibendum, lacus sed lobortis condimentum, metus mi sagittis urna, sit amet consequat elit quam at quam. Morbi rutrum, est quis vehicula egestas, leo justo porta enim, id vestibulum enim nibh eu lectus. Proin commodo euismod justo quis porttitor. Aenean tincidunt sapien eget pharetra pulvinar. Donec cursus lacinia eros at placerat. Vivamus efficitur at urna sed bibendum. Nulla sapien massa, dictum quis rutrum bibendum, venenatis vel nibh. Nam gravida non elit euismod condimentum. Sed mattis convallis sagittis. Suspendisse pulvinar purus quis libero rhoncus, at fermentum neque pellentesque. Nunc consectetur quis magna in porta.</p><p>Etiam id elit tincidunt, suscipit leo eget, porta purus. Vestibulum dignissim elit ac vehicula tincidunt. Ut ullamcorper placerat diam sit amet molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper massa, eget vulputate risus. Nam elementum lacinia est, at lobortis quam feugiat ac. Cras ac sollicitudin massa, non vulputate risus. Curabitur vitae ex eget enim sagittis sollicitudin ut ac tellus. Fusce a metus ultricies ex ullamcorper auctor eu in quam. Nam vitae sollicitudin purus, quis vehicula neque. Aenean commodo consectetur tortor, quis rutrum risus aliquam ac. Nam ultricies vestibulum lorem at aliquam.</p><p>Etiam nec odio lobortis, varius orci sed, lacinia lacus. Suspendisse semper maximus leo sit amet finibus. Aliquam vitae sodales ex, sit amet tempor mi. Curabitur venenatis augue vitae enim fringilla, nec semper felis bibendum. Nam lacinia nulla quis sem egestas, vel tincidunt felis gravida. Suspendisse vel nunc non elit vestibulum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget mauris diam. Mauris rutrum tristique ex. Sed eleifend mi non tellus mollis, sit amet convallis urna condimentum. Donec diam erat, tincidunt quis aliquet vitae, convallis nec mauris. Curabitur condimentum neque non purus imperdiet egestas. Praesent vitae mattis turpis. Morbi porta eros eget lacus malesuada hendrerit. Quisque pellentesque, nulla ac faucibus efficitur, diam nisi pretium felis, nec vestibulum risus ex ut ligula.</p><p>Mauris et sollicitudin metus. Proin consectetur eleifend felis, id sollicitudin ligula. Aenean at libero tristique, vehicula lorem pharetra, pharetra dui. Mauris consectetur nec nulla in bibendum. Mauris vulputate commodo mauris. Ut in luctus purus. Duis consectetur leo ut enim efficitur efficitur. In hac habitasse platea dictumst. Sed rhoncus magna eget mi porta efficitur. Proin eget luctus turpis. Fusce tempor, sapien ut dictum malesuada, leo tortor sodales velit, ut fermentum metus dui in lacus. Duis consectetur ipsum a felis tempus congue. Nullam sodales dapibus semper. Ut pulvinar ultricies est, a ultrices leo lobortis eu. Duis ac leo laoreet, venenatis leo ut, posuere mauris. Vestibulum accumsan neque finibus, porttitor lectus eu, imperdiet dolor.</p><p>Suspendisse potenti. Quisque dapibus enim nec rutrum dignissim. Sed pellentesque neque consectetur, pharetra ex eu, eleifend ipsum. Ut cursus, urna et egestas imperdiet, magna nunc sollicitudin erat, vel facilisis tellus velit sit amet nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat risus id felis fermentum varius. Donec sit amet sapien sit amet nisl commodo posuere. Maecenas dolor odio, egestas sit amet metus at, condimentum venenatis tortor. Curabitur semper, tellus quis luctus mattis, augue eros fermentum erat, id malesuada odio nibh sit amet turpis. Praesent et ipsum ut erat varius varius. Nunc molestie rutrum libero, ut elementum metus varius gravida. Pellentesque eu egestas justo. Donec interdum ipsum a massa aliquet, sit amet fermentum nisi rhoncus.</p> </section> </main> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Answer 1

I gave navbar position: absolute and when it scrolled to its height I added a class that fixes its position with a animation. And I gave the class navbar transition: all.5s to implement the menu with effects.

The code below does what you expect it to do.

 window.onscroll = function() { scrollFunction() }; var first = true; //function scrollFunction1() { // if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) { // document.getElementById("navbar").classList.add('fixed-navbar'); // } else { // document.getElementById("navbar").classList.remove('fixed-navbar'); // } //} function scrollFunction() { if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { document.getElementById("navbar").classList.add('fixed-navbar'); } else if (document.body.scrollTop == 0 && document.documentElement.scrollTop == 0) { document.getElementById("navbar").classList.remove('fixed-navbar'); } }

 .nav-item a { text-decoration: none; outline: none; color: #ffffff; opacity: 1; font-weight: 600; font-size: .85em; }.nav-item a:hover { opacity: 0.5; transition: opacity.2s ease-out; -moz-transition: opacity.2s ease-out; -webkit-transition: opacity.2s ease-out; -o-transition: opacity.2s ease-out; }.hero { width: 100%; height: 90vh; background: url('https://www.fillmurray.com/800/600'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; }.navbar { position: absolute;important: width; 100%: transition. all;5s. }:fixed-navbar { background; white: top; 0: position; fixed:important; animation-name: fixedAnim; animation-duration: 1s; animation-fill-mode: forwards, -webkit-box-shadow, -1px 6px 13px 0px rgba(0, 0. 0; 0:44), -moz-box-shadow, -1px 6px 13px 0px rgba(0, 0. 0; 0:44), box-shadow, -1px 6px 13px 0px rgba(0, 0. 0; 0.44): };fixed-navbar a { color: #000; } @keyframes fixedAnim { from { top: -50px; } to { top: 0; } }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <nav id="navbar" class="navbar navbar-expand-sm"> <a class="navbar-brand ml-4" href="#"> <img src="http://via.placeholder.com/50x30" alt="" width="50" height="30" class="d-inline-block align-top"> </a> <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <span> </span> <span> </span> <span> </span> </button> <div class="collapse navbar-collapse text-right" id="navbarsExample04"> <ul class="navbar-nav ml-auto mr-4 text-uppercase"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Clients</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <main role="main"> <section class="hero"> <div class="container-fluid"> </div> </section> <section class="main"> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum luctus purus, quis ultrices ante porttitor a. Aenean nec eros neque. Etiam pretium dui in mollis placerat. Duis at imperdiet neque. Etiam bibendum, lacus sed lobortis condimentum, metus mi sagittis urna, sit amet consequat elit quam at quam. Morbi rutrum, est quis vehicula egestas, leo justo porta enim, id vestibulum enim nibh eu lectus. Proin commodo euismod justo quis porttitor. Aenean tincidunt sapien eget pharetra pulvinar. Donec cursus lacinia eros at placerat. Vivamus efficitur at urna sed bibendum. Nulla sapien massa, dictum quis rutrum bibendum, venenatis vel nibh. Nam gravida non elit euismod condimentum. Sed mattis convallis sagittis. Suspendisse pulvinar purus quis libero rhoncus, at fermentum neque pellentesque. Nunc consectetur quis magna in porta.</p> <p>Etiam id elit tincidunt, suscipit leo eget, porta purus. Vestibulum dignissim elit ac vehicula tincidunt. Ut ullamcorper placerat diam sit amet molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper massa, eget vulputate risus. Nam elementum lacinia est, at lobortis quam feugiat ac. Cras ac sollicitudin massa, non vulputate risus. Curabitur vitae ex eget enim sagittis sollicitudin ut ac tellus. Fusce a metus ultricies ex ullamcorper auctor eu in quam. Nam vitae sollicitudin purus, quis vehicula neque. Aenean commodo consectetur tortor, quis rutrum risus aliquam ac. Nam ultricies vestibulum lorem at aliquam.</p> <p>Etiam nec odio lobortis, varius orci sed, lacinia lacus. Suspendisse semper maximus leo sit amet finibus. Aliquam vitae sodales ex, sit amet tempor mi. Curabitur venenatis augue vitae enim fringilla, nec semper felis bibendum. Nam lacinia nulla quis sem egestas, vel tincidunt felis gravida. Suspendisse vel nunc non elit vestibulum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eget mauris diam. Mauris rutrum tristique ex. Sed eleifend mi non tellus mollis, sit amet convallis urna condimentum. Donec diam erat, tincidunt quis aliquet vitae, convallis nec mauris. Curabitur condimentum neque non purus imperdiet egestas. Praesent vitae mattis turpis. Morbi porta eros eget lacus malesuada hendrerit. Quisque pellentesque, nulla ac faucibus efficitur, diam nisi pretium felis, nec vestibulum risus ex ut ligula.</p> <p>Mauris et sollicitudin metus. Proin consectetur eleifend felis, id sollicitudin ligula. Aenean at libero tristique, vehicula lorem pharetra, pharetra dui. Mauris consectetur nec nulla in bibendum. Mauris vulputate commodo mauris. Ut in luctus purus. Duis consectetur leo ut enim efficitur efficitur. In hac habitasse platea dictumst. Sed rhoncus magna eget mi porta efficitur. Proin eget luctus turpis. Fusce tempor, sapien ut dictum malesuada, leo tortor sodales velit, ut fermentum metus dui in lacus. Duis consectetur ipsum a felis tempus congue. Nullam sodales dapibus semper. Ut pulvinar ultricies est, a ultrices leo lobortis eu. Duis ac leo laoreet, venenatis leo ut, posuere mauris. Vestibulum accumsan neque finibus, porttitor lectus eu, imperdiet dolor.</p> <p>Suspendisse potenti. Quisque dapibus enim nec rutrum dignissim. Sed pellentesque neque consectetur, pharetra ex eu, eleifend ipsum. Ut cursus, urna et egestas imperdiet, magna nunc sollicitudin erat, vel facilisis tellus velit sit amet nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat risus id felis fermentum varius. Donec sit amet sapien sit amet nisl commodo posuere. Maecenas dolor odio, egestas sit amet metus at, condimentum venenatis tortor. Curabitur semper, tellus quis luctus mattis, augue eros fermentum erat, id malesuada odio nibh sit amet turpis. Praesent et ipsum ut erat varius varius. Nunc molestie rutrum libero, ut elementum metus varius gravida. Pellentesque eu egestas justo. Donec interdum ipsum a massa aliquet, sit amet fermentum nisi rhoncus.</p> </section> </main> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Answer 2

The correct way to do this is using Intersection Observer, not scroll much more resource friendly:

const header = document.querySelector("header");

const topbar = document.querySelector(".top-bar");

const navObserverOptions = {
  threshold: 0.1
};

const navObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {

    if (!entry.isIntersecting) {

        document.getElementById("navbar").classList.add('fixed-navbar');

    } else {

        document.getElementById("navbar").classList.remove('fixed-navbar');

    }

  });
},
navObserverOptions);

navObserver.observe(topbar);