How to create a sticky navigation bar that becomes fixed to the top after scrolling
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#service-link">Services</a></li>
<li><a href="#contact-link">Contact</a></li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li><a href="url">Sign In</a></li>
<li><a href="url">Blog</a></li>
<li><a href="url">About</a></li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT: if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}