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 every bit nosotros were the showtime to innovate it together with this is the argue why today this post service volition comprehend same affair which nosotros discussed previously but today yous don’t ask to read whatever thing.You tin sit down dorsum together with grap a bowl of popcorn sentry piece eating together with taste the consummate Video Tutorial. Which would comprehend every affair which nosotros previously leaned from starting to real end.


The Video is optimized amongst my vox to brand yous empathise rapidly 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) transcend 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 meridian */
-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 meridian 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 transcend to the #content (value is same every bit the meridian of the nav)
            $(‘nav’).addClass(‘fixed’).css(‘top’,’0′).next().css(‘padding-top’,’60px’);
        } else {
// when scroll upwardly or less than aboveHeight, take 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 inwards 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 yous nevertheless aspect upwardly whatever difficulties experience gratuitous to inquire I would beloved to attention yous till together with then peace approbation together with happy Sticky Scrolling 🙂

Hosting Unlimited Indonesia


Sumber http://www.mybloggerlab.com