Reputation: 1304

Bootstrap Fixing navigation bar on top when scrolling

I have a webpage with navigation bar using bootstrap. I wanted the navigation bar to fix to the top of the webpage when scrolling down the web page.

But my navigation bar were not able to fix at the top. It became static instead.

Below is my code. How can I go about doing it?

<!DOCTYPE html>
<html>
    <head>
        <title>About Me</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet">

        <script type="text/javascript">
    /* affix the navbar after scroll below header */
$('#nav').affix({
      offset: {
        top: $('header').height()-$('#nav').height()
      }
}); 

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })

/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

</script>

        <style>
        @import url(http://fonts.googleapis.com/css?family=Kreon:400,700);

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
  font: normal 14px arial,sans-serif;
}

.row {
  margin-left:0px;
  margin-right:0px;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
  margin-top:50px;
  padding-top:20px;
  padding-bottom:20px;
}


/* Custom page CSS
-------------------------------------------------- */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

#footer {
  background-color:#414141;
}

#footer a {
  color:#efefef;
}

h1,h2,h3,h4 {
  font-family: 'Kreon', serif;
  vertical-align:middle;
}

header {
  background: #f16251;
  height:550px;
  color:#000000;
}

header h1,header h2,header h3 a,header a,header a:hover {
  color:#101010;
  font-weight:800;
  text-decoration:none;
}

header h3 {
  font-family: 'Kreon', serif;
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  font-size:34px;
  padding:12px 10px 6px 10px;
}

header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

h1 {
  font-size:50px;
}

#nav {
  width: 100%;
  position:static;
  top:-32px;
}

#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}

#footer > .container {

}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
.navbar-nav {
  margin: 1px 1px; 
}  

/* customize nav style */
.navbar-custom {
    background-color: #2e2e2e;
    font-weight:700;
    text-transform:uppercase;
    border-width:0;
}
.navbar-custom  .navbar-nav>li>a {
    color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
    background-color: #000;
}
.navbar-custom .dropdown-menu{
    right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
    border-top-color: #999;
    border-bottom-color: #999;
}

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
    outline:0;
}

.divider {
    height:100px;
}

.panel {
    border-width:0;
}

@media (max-width: 768px) {
    header {
        height: 95px;
    }
}

#map-canvas {
    width: 100%; 
    height: 300px;
    margin: 0;
    padding: 15px;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #ffcc33;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 


section {
  color: #ffffff;
  min-height: 400px;
  height: auto !important;
  height: 100%;
  padding-top:100px;
}

.bg-4 {
    padding-top:30px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,0.2)),to(rgba(255,255,255,0)), color-stop(1,#000));
}

        </style>
    </head>
    <body>

<!-- Wrap all page content here -->
<div id="wrap">

<header class="masthead">
    <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1><a href="#" title="Bootstrap Template">Testing Navigation</a>
          <p class="lead">{Using Bootstrap}</p></h1>
      </div>
    </div>
    </div>
</header>


<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-justified">
          <li><a href="#">Home</a></li>
          <li><a href="#section2">About</a></li>
          <li><a href="#section3">My Skills</a></li>
          <li class="active"><a href="#section1"><strong>Education</strong></a></li>
          <li><a href="#section4">Portfolio</a></li>
          <li><a href="#section5">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container -->
</div><!--/.navbar -->

<!-- Begin page content -->
<div class="divider" id="section1"></div>

<div class="container">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="page-header text-center">
      <h1>Testing</h1>
    </div>

    <p class="lead text-center">
      Testing
    </p>
    <p class="text-center">
      Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
    </p>
  </div>
</div>

        <!-- JavaScript placed at the end of the document so the pages load faster -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Upvotes: 1

Answers (2)

rnrneverdies

Reputation: 15627

You can set dynamically navbar-fixed-top style to keep navbar fixed on top.

This code adds the required class when the navigation bar reaches the upper limit of the window.

EDIT

Last night I was tired and I could not finish polishing the code. Here the final solution. I should clarify that I have not looked at your code and I've started from scratch.

Tested on:

Opera 24.0
Safari 5.1.7 (on windows)
Firefox 31.0
Chrome 36
Chrome 36 - mobile emulation

JAVASCRIPT

// assets
var win = $(window);
var nav = $('#nav');
// this element fills the space normally occupied by the navigation bar when becomes fixed.
var navproxy = $('#navproxy');  
var body = $('body');
var topdiv = $('#topdiv');

// put navbar at bottom, by setting height of topbanner
function setupTopdiv(event) {
    topdiv.height(win.height() - nav.height());
    navproxy.height(nav.outerHeight(true));
    // trigger scroll
    win.scroll();
};

// setup topdiv
setupTopdiv();

// On resize, setup toolbanner again
win.on('resize', setupTopdiv);

// On scroll, check for fix navbar
win.on('scroll', function () {
    var bh = win.height();
    var sh = nav.height();
    var st = win.scrollTop();
    if (st > bh - sh) {
        nav.addClass("navbar-fixed-top");
        // this element fills the space normally occupied by navbar
        navproxy.removeClass("hidden");
    } else {
        nav.removeClass("navbar-fixed-top");
        navproxy.addClass("hidden");
    }
});

JSFIDDLE

JSFIDDLE SHOW

Upvotes: 2

phpguest

Reputation: 804

Change navbar-static-top with navbar-fixed-top.

Upvotes: 1

Bootstrap Fixing navigation bar on top when scrolling

Answers (2)

EDIT

JAVASCRIPT

Related Questions