Sticky Scrolling Site Navigation Bar For Blogger

Yesterday We Published In Blogger Make Your Old Site Navigation Bar Scrollable & Sticky Which became a huge success equally nosotros were the kickoff to innovate it too this is the argue why today this post volition comprehend same matter which nosotros discussed previously but today you lot don't postulate to read whatever thing.You tin sit down dorsum too grap a bowl of popcorn sentinel piece eating too taste the consummate Video Tutorial. Which would comprehend every matter which nosotros previously leaned from starting to real end.

The Video is optimized alongside my vox to brand you lot empathise chop-chop too 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;
}


/* full 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) exceed 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 exceed */
-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 exceed of <header>

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

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

// when scroll

    $(window).scroll(function(){

//if scrolled downwardly to a greater extent than than the header's height

        if ($(window).scrollTop() > aboveHeight){

// if yes, add together "fixed" bird to the <nav>

// add together padding exceed to the #content (value is same equally the exceed of the nav)

            $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');

        } else {

// when scroll upward or less than aboveHeight, take away the "fixed" class, too the padding-top

            $('nav').removeClass('fixed').next().css('padding-top','0');

        }

    });

});

</script>

Additional Elements Added inwards the Video

Simply added <nav> just higher upward the Div id of Navigation Bar

Added </nav> just after Navigation Bar's ending </div> (DIV) Tag  

Still it is real much novel too this is exclusively the biggning nosotros volition surly expose to a greater extent than Scrolling navigation bars alongside to a greater extent than improved interface.If you lot withal facial expression upward whatever difficulties experience gratis to inquire I would dear to assistance you lot till hence peace approving too happy Sticky Scrolling :)