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 outset to innovate it together with this is the argue why today this post service volition encompass same affair which nosotros discussed previously but today you lot don't bespeak to read whatever thing.You tin sack sit down dorsum together with grap a bowl of popcorn lookout spell eating together with savor the consummate Video Tutorial. Which would encompass every affair which nosotros previously leaned from starting to real end.

The Video is optimized amongst my vocalism to brand you lot empathise apace together with 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) 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 superlative */
-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 superlative of <header>

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

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

// when scroll

    $(window).scroll(function(){

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

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

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

// add together padding top to the #content (value is same equally the superlative 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, together with the padding-top

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

        }

    });

});

</script>

Additional Elements Added inwards the Video

Simply added <nav> just to a higher house the Div id of Navigation Bar

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

Still it is real much novel together with this is solely the biggning nosotros volition surly issue to a greater extent than Scrolling navigation bars amongst to a greater extent than improved interface.If you lot yet aspect upward whatever difficulties experience gratis to enquire I would dearest to assistance you lot till together with thus peace approving together with happy Sticky Scrolling :)