The Video is optimized with my voice to make you understand quickly and more effectively.So Here is the video.
For More Detailed Guidance Go To This Page:In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky
Style Sheet Used In Video
/* 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;
}
<!--
a {color:blue;}
a:hover {text-decoration: underline;color:#E1B2B2;}
-->
JavaScript Used In Video
<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>
Additional Elements Added in the Video
Simply added <nav> just above the Div id of Navigation BarAdded </nav> just after Navigation Bar's ending </div> (DIV) Tag
Still it is very much new and this is only the biggning we will surly publish more Scrolling navigation bars with more improved interface.If you still face any difficulties feel free to ask I would love to assist you till then peace blessing and happy Sticky Scrolling :)
Style Sheet Used In Video
/* 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;
}
<!--
a {color:blue;}
a:hover {text-decoration: underline;color:#E1B2B2;}
-->
JavaScript Used In Video
<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 paddingvar aboveHeight = $('header').outerHeight();// when scroll$(window).scroll(function(){//if scrolled down more than the header's heightif ($(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>
Additional Elements Added in the Video
Simply added <nav> just above the Div id of Navigation BarAdded </nav> just after Navigation Bar's ending </div> (DIV) Tag
Sticky Scrolling Site Navigation Bar For Blogger
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!