Bootstrap Snippet On Scroll Navbar Color Change using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(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');
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"On Scroll Navbar Color Change"
Bootstrap 4.0.0 Snippet by anmolv886

Related: See More

Questions / Comments:

"On Scroll Navbar Color Change" Bootstrap 4.0.0 Snippet by anmolv886

Related: See More

Questions / Comments:

"On Scroll Navbar Color Change"
Bootstrap 4.0.0 Snippet by anmolv886