CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RonTheOld
RonTheOld

Reputation: 777

How to get the navigation bar to stay fixed

I am just trying to get my nav bar to have a fixed position at the top of the screen, so when the user scrolls down it should stay at the top, but for some reason it's not doing it. 

 $(document).ready(function(){
   $(window).bind('scroll', function() {
   var navHeight = $( window ).height() - 286;
     if ($(window).scrollTop() > navHeight) {
       $('nav').addClass('fixed');
     }
     else {
       $('nav').removeClass('fixed');
     }
  });
});
.section {
    background-color: Red;
    padding: 33px 0;
    height: 5000px;
}

.fixed {
    position: fixed;
    left: 20;
    top: 0;
    width: 100%;
    list-style: none;
    z-index: 1;
}
#navs li {
    margin: 0 0 10px 0;
}
#navs li a {
    font-size: 0.9em;
    font-weight: 600;
    color: #999999;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#navs li:hover {
    color: #FFFFFF;
    font-size: 18px;
}
#navs li a.active {
    color: #FFFFFF;
    font-size: 18px;
}
/* For Index 2 */

.navbar {
    min-height: 70px;

}
.navbar-nav {
    float: none;
    margin: 0;
    text-align: center;

}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav > li > a {
    line-height: 38px;
}
.navbar-nav > li > a.active {
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333333;
    background-color: #E7E7E7;
}
.sticky-wrapper.is-sticky .main-nav {
    width: 100%;
    z-index: 10;
}
.navbar-toggle {
    background-color: #000000;
    background-image: none;
    border: 1px solid #000000 !important;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 18px;
    padding: 9px 10px;
    position: relative;

}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #2DCC70;
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 0px;">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#home" class="colapse-menu1">Home</a></li>
            <li class=""><a href="#about" class="colapse-menu1">About Me</a></li>
            <li class=""><a href="#resume" class="colapse-menu1">My Skills</a></li>
            <li class=""><a href="#skills" class="colapse-menu1">Portfoilo</a></li>
            <li class=""><a href="#service" class="colapse-menu1">Contact Me</a></li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>
</div>
<div class="section">
</div>

Also when I refresh it, when I am half way down the page, the bar goes back to the top, when really it should stay there

I been using this example and trying to implement it; you can see if you scroll down to half way and refresh the bar stays, but mine does not

Upvotes: 1

Views: 1091

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

I am just trying to get my nav bar to have a fixed position at the top of the screen, so when the user scrolls down it should stay at the top

markup

<nav class='primary-navigation'>
  nav stuff...
</nav>


styles

.primary-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

jsFiddle: https://jsfiddle.net/sheriffderek/3ahupnrk/


I been using this example and trying to implement it; you can see if you scroll down to half way and refresh the bar stays, but mine does not

If you are trying to make your navigation only stick under certain conditions - like this example, here is an extensively commented example: https://jsfiddle.net/sheriffderek/zdtLawL4/ - and here is another slightly different example as well: http://codepen.io/sheriffderek/pen/zLEkr

I hope it helps.

Upvotes: 1

Related Questions