Sticky Scrolling Site Navigation Bar For Blogger
Blogger Tools Blogger Tutorials Video Tutorials
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
