Bootstrap Snippet make static navbar fixed when scroll 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
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<!--navbar menu-->
<section class="navbar-info">
<nav class="navbar navbar-default navbar-me">
  <div class="container-fluid ">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed menu-collapsed-button" data-toggle="collapse" data-target="#navbar-primary-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand site-logo" href="#">LOCUS</a>
    </div>
      
      <div class="collapse navbar-collapse navbar-right  header-right-menu" id="navbar-primary-collapse">
            <ul class="nav navbar-nav ">
            <li class="page-scroll">
                        <a class="header" href="javascript:" id="about-menu">About</a>
                    </li>
                    <li>
                        <a class="" href="javascript:" id="services-menu">Services</a>
                    </li>
                    <li>
                        <a class="" href="javascript:" id="Clients-menu">Clients</a>
                    </li>
                    <li>
                        <a class="" href="javascript:" id="contact-menu">Contact</a>
                    </li>
                    <li>
                        <a class="" href="javascript:" id="project-menu">Projects</a>
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{
    margin: 0px;
    padding: 0px;
    min-height: 2500px;
    background-color: #f3f3f3;
}
.navbar-info {
    width: 100%;
    
    
}
.fixed-me{
    transition: all 1s ;
}
.fixed-me{
    background-color:#fff !important;
    padding: 0px  !important;
    margin-bottom: 5px;
    position: fixed;
    top:0;
    z-index:888;
    width: 100%;
    border-bottom: 3px solid #ccc !important;
    
}
.navbar-me {
    
   transition: all 1s ;
}
.header-right-menu{
 padding: 5px 15px !important;   
    
}
.site-logo{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$(window).scroll(function() {
    if($(this).scrollTop()>5) {
        $( ".navbar-me" ).addClass("fixed-me");
    } else {
        $( ".navbar-me" ).removeClass("fixed-me");
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"make static navbar fixed when scroll"
Bootstrap 3.3.0 Snippet by mora306

Related: See More

Questions / Comments:

"make static navbar fixed when scroll" Bootstrap 3.3.0 Snippet by mora306

Related: See More

Questions / Comments:

"make static navbar fixed when scroll"
Bootstrap 3.3.0 Snippet by mora306