"On Scroll Navbar Color Change"
Bootstrap 4.1.1 Snippet by iammohitverma

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="container me"> <div class="row"> <header> <div id="topbar" class="fixed-top clearHeader"> <div class="container"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="#">Logo</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 ml-auto mr-3"> <li class="nav-item active"> <a class="nav-link text-uppercase" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-uppercase" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link text-uppercase" href="#">Apps</a> </li> <li class="nav-item"> <a class="nav-link text-uppercase" href="#">subscription</a> </li> <li class="nav-item"> <a class="nav-link text-uppercase" href="#">contact us</a> </li> <li class="nav-item"> <a class="nav-link text-uppercase" href="#">mini desert</a> </li> </ul> <button type="button" class="btn btn-link">Login/Register</button> </div> </nav> </div> </div> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis pretium enim, ut accumsan ligula faucibus eget. Proin et lobortis orci, at vestibulum nisi. Pellentesque consectetur mollis...</p> </header> </div> </div>
.me { background-color:orange; } header .bg-black { background-color:#000; transition:1s; } header #topbar .navbar-brand { font: 400 42px/54px open sans; } header #topbar .nav-link { color: #fff; } header #topbar .nav-link:hover { color:#ed6806; } p { margin: 80px 0 0 0; }
$(function() { var header = $(".clearHeader"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { header.removeClass('clearHeader').addClass("bg-black"); } else { header.removeClass("bg-black").addClass('clearHeader'); } }); });

Related: See More


Questions / Comments: