"Header fix on scroll"
Bootstrap 4.1.1 Snippet by Poojathakur

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <title>Page Title</title> </head> <body> <header class="header" id="myHeader"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light "> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> </div> </header> <section class="flipbook-banner"> <div class="container"> <div class="banner-content"> <figure> <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="flipbook"> </figure> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- <script src="js/custom.js"></script> --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { const header = document.getElementById('myHeader'); function handleScroll() { if (window.scrollY > 0) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } } window.addEventListener('scroll', handleScroll); }); </script> </body> </html>
.header { padding: 20px; transition: background-color 0.3s; } .scrolled { position: fixed; top: 0; z-index: 99; background: red; left: 0; right: 0; } .scrolled .navbar a , .scrolled .navbar ul li a{ color: #fff !important; } .scrolled .navbar .dropdown-menu a{ color: #000 !important; }

Related: See More

Vue Material Dashboard
Resize & Fixed Header (shrinking header)
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe
Header Curtain Effect

Questions / Comments: