Bootstrap Snippet Resize and fix top navigation on page scroll using HTML CSS 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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
    <div class="sticky_navigation_wrapper">
        <div class="sticky_navigation">
            <div class="container">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">WebSiteName</a>
                        </div>
                        <ul class="nav navbar-nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Page 1</a></li>
                            <li><a href="#">Page 2</a></li>
                            <li><a href="#">Page 3</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>
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
 .wrapper
 {
     height:1000px;
     padding-top: 50px;
 }
 .sticky_navigation_wrapper {
        width: 100%;
        height: 85px;
    }
    .sticky_navigation {
        top: 0;
        left: 0;
        z-index: 10000;
        width: 100%;
        background: #fff;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
.headerfixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.headerrelative {
    position: relative;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
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
 $(document).ready(function () {
 var sticky_navigation_offset_top = $('.sticky_navigation').offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('.sticky_navigation').addClass("headerfixed");
            $('.sticky_navigation').removeClass("headerrelative");
        } else {
            $('.sticky_navigation').removeClass("headerfixed");
            $('.sticky_navigation').addClass("headerrelative");
        }
    };
    sticky_navigation();
   
    $(window).scroll(function () {
        sticky_navigation();
    });
 });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Resize and fix top navigation on page scroll"
Bootstrap 3.3.0 Snippet by khurram.shafeeq

Related: See More

Questions / Comments:

"Resize and fix top navigation on page scroll" Bootstrap 3.3.0 Snippet by khurram.shafeeq

Related: See More

Questions / Comments:

"Resize and fix top navigation on page scroll"
Bootstrap 3.3.0 Snippet by khurram.shafeeq