Sticky Scrolling Site Navigation Bar For Blogger

Socialize It →

Tweet

4

Advertisements

Yesterday We Published In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky Which became a huge success as we were the first to introduce it and this is the reason why today this post will cover same thing which we discussed previously but today you don't need to read any thing.You can sit back and grap a bowl of popcorn watch while eating and enjoy the complete Video Tutorial. Which would cover every thing which we previously leaned from starting to very end.

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 Bar

Added </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 :)

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).