Bootstrap Snippet Awesome fixed header bootstarp 4 using HTML CSS 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
<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 ---------->
<header>
<nav class="navbar navbar-expand-lg top_navbar navbar-dark navbar-light" id="top-navbar">
        <div class="container">
            <a class="navbar-brand" href=""><img src="img/logo.png" alt="" class="img-fluid" />logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="fa fa-bars"></span>
            </button>
            <div class="collapse navbar-collapse" id="ftco-nav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Segments</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Press Releases</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
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
body{
    height:5000px;
    
}
/* ==========================================================================
    Navbar Section
========================================================================== */
.navbar-light {
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0;
    margin: 0;
}
.bg_red{
    background: #de2d26 !important;
     position: relative;
}
.navbar-light .navbar-brand {
    color: #fff;
    padding: 15px;
}
.navbar-light .navbar-nav .nav-item .nav-link {
    font-size: 18px;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 500;
    opacity: 1 !important;
}
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
(function($) {
// scroll
    var scrollWindow = function() {
        $(window).scroll(function(){
            var $w = $(this),
                    st = $w.scrollTop(),
                    navbar = $('.top_navbar'),
                    sd = $('.js-scroll-wrap');
            if (st > 150) {
                if ( !navbar.hasClass('scrolled') ) {
                    navbar.addClass('scrolled');    
                }
            } 
            if (st < 150) {
                if ( navbar.hasClass('scrolled') ) {
                    navbar.removeClass('scrolled sleep');
                }
            } 
            if ( st > 350 ) {
                if ( !navbar.hasClass('awake') ) {
                    navbar.addClass('awake');   
                }
                
                if(sd.length > 0) {
                    sd.addClass('sleep');
                }
            }
            if ( st < 350 ) {
                if ( navbar.hasClass('awake') ) {
                    navbar.removeClass('awake');
                    navbar.addClass('sleep');
                }
                if(sd.length > 0) {
                    sd.removeClass('sleep');
                }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Awesome fixed header bootstarp 4 "
Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Awesome fixed header bootstarp 4 " Bootstrap 4.1.1 Snippet by Shivamsemisetia

Related: See More

Questions / Comments:

"Awesome fixed header bootstarp 4 "
Bootstrap 4.1.1 Snippet by Shivamsemisetia