Bootstrap Snippet Sticky NavBar With Scroll Effect using HTML CSS Bootstrap Javascript

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.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 lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Sticky NavBar With Scroll</title>
  </head>
  <body>
    <!-- Header Area Start -->
    <header class="header-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-expand-lg custom-navbar">
                      <a class="navbar-brand logo" 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"><i class="fa fa-bars"></i></span>
                    </button>
                    <div class="collapse navbar-collapse menu" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                          <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.header-section{
      position: fixed;
      width: 100%;
      z-index: 999;
      padding: 10px 0px;
}
.logo{
      color: #fff !important; 
}
.menu ul li {
    font-size: 17px;
    padding: 0px 10px;
}
.menu ul li a {
    color: #fff !important;
}
.black{
      background: #111E6C;
      box-shadow: 0px 1px 7px 1px #111e6cc2;
}
.hero-section {
      width: 100%;
      height: 100vh;
      background-image: url(https://i.postimg.cc/BZYnPt60/background-slider.jpg);
      background-size: cover;
      position: relative;
}
.display {
    display: table;
}
.hero-content {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100vh;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
$(window).on("scroll", function() {
    if($(window).scrollTop()) {
        $('.header-section').addClass('black');
    }
    else {
        $('.header-section').removeClass('black');
    }
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sticky NavBar With Scroll Effect"
Bootstrap 4.1.1 Snippet by Nabed

Related: See More

Questions / Comments:

"Sticky NavBar With Scroll Effect" Bootstrap 4.1.1 Snippet by Nabed

Related: See More

Questions / Comments:

"Sticky NavBar With Scroll Effect"
Bootstrap 4.1.1 Snippet by Nabed