In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky

2012 is the year of Information technology all popular websites like Google,Facebook are making there site look more demanding with latest technology this is the reason why Google completely changed looks of there products i.e YouTube , Blogger and even renamed Android Market to Google Play Store.Google not only changed the looks of there old products but also introduced Google Plus which become the true competitor of Facebook.Even Facebook try to make some changes which was not as successful as Google but still they were pretty much extra ordinary.Facebook introduced timeline which has a most important feature and it is Scrollable Navigation bar

which allows you to navigate the page with out going to top of the page.
when you scroll down the page it will keep following you till very end.
which will only appear when you scroll down the page.
if you scroll back to top it will get back to its original position.

These are the feature which do attract us although Google Dynamics has Scrollable sticky bar but it was not available for Blogger Custom Template

After the research work of 3 days and today's 5 hours of coding Finally I was able To Create MBL Scrollable Sticky Navigation Bar For Blogger.It basically works on jQuery when ever you scroll down it converts your current navigation bar into a scrolling bar and when you go back to top it comes back to its original position.So let us starting optimizing our blog for Scrollable Sticky Navigation Bar.it will just Transform your Old navigation Bar into a Scrollable Navigation Bar.

I know you would love to preview The MBL Scrollable Sticky Navigation Bar take a look at it.Remember:Your navigation bar remains the same but it will become Scrollable and sticky

Demo NO 1

Demo NO 2

Important:To Get the Preview Please Scroll the DEMO pages and you will be able to see the Scrollable Sticky Navigation Bar.

Adding CSS Style In Template

First we will add styles sheet to the blogger template i.e CSS so first go to

Blogger.com >> YourBlog >> Template >> EDIT HTML >> Proceed
Search For ]]></b:skin> and just above it paste the following code and save the template

/* MBL-Sticky-Navigation-Bar */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}

::selection {
background: #c00;
color:#fff;
}

::-moz-selection {
background: #c00;
color:#fff;
}

/* general styles */
body {
background: url(img/bgnoise_lg.png);
font: 20px 'Open Sans Condensed', Tahoma, Geneva, sans-serif;

}

a {
color:#c00;
text-decoration:none;
}

#MBL-Sticky-Navigation-Bar {
width:940px;
margin: 0 auto;

}

header {
text-align:center;
padding:70px 0;
}

header h1 {
color:#999;
text-shadow:0 0 0 transparent, 0 1px 0 #fff, 0 -1px 0 #555;
font-size:40px;
}

header h2 {
display:inline-block;
border: 1px dashed #999;
padding: 2px 10px 5px;
margin: 10px 0 0;
border-radius: 5px;
box-shadow: 0 1px 1px #fff;
font-size:20px;
}

nav {
background:url(img/nav-bg.png) no-repeat;
height: 90px;
width: 960px;
margin-left: -5px;
line-height:50px;
position: relative;
}

nav:after {
background:url(img/nav-shadow.png) top repeat-x;
position: middle;
height:30px;
width:980px;
left:10px;
top:60px;
content:'';
}

nav p {
padding: 0 70px;
}

nav a {
color:#fff;
text-shadow: 0 0 0 transparent, 0 -1px 1px #900;
}

#content {
background: #fff;
height: 1500px; /* presetting the height */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

#content p {
padding:20px 60px;
}

.fixed {
position:fixed;
}

Adding JQuery To Your Template:

Now We need to insert Jquery as it is the only thing which is responsible to make your navigation bar Scrollable.

Go To Blogger.com >> Your Blog >> Layout >> Add A Gadget
Add Html/JavaScripts >> Then paste the following code there >> And save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

//Calculate the height of <header>

//Use outerHeight() instead of height() if have padding

var aboveHeight = $('header').outerHeight();

// when scroll
$(window).scroll(function(){

//if scrolled down more than the header's height
if ($(window).scrollTop() > aboveHeight){

// if yes, add "fixed" class to the <nav>
// add padding top to the #content (value is same as the height of the nav)
$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {

// when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top
$('nav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>

Making Your OLD Navigation Bar Scrollable:

Now this is the most important step where we will covert your Static navigation bar into a scrolling navigation bar.simply go to

Blogger.com>>Template>>EDIT HTML>>Proceed>>

Now Search For your Navigation Category Name i.e Home or any other let us take example of bsresearcher.blogspot.com in the navigation bar I have Blogger Tricks as my second main category so I will search Blogger Tricks in the template Remember:The category you are searching should be the first one or second one in your navigation bar.

When you find it you would be able to see I.e <div id='Navbar'> which is the ID of your navigation bar. .Remember:You Might not get the same div Id as all the templates are differently coded but it would be related to it i.e <div id='Nav'> , <div id='Navcontainer'> id='NavbarMenu'> and etc

Now just above the div id of your navigation bar paste <nav>

Just after adding <nav> tag search for </div> which will be at the end of your navigation coding.Remember:You need to find just next </div> closing tag to your navigation settings