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
Hello, my name is Aamir khan. I'm a 24year old blogger from Pakistan.
No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.