The idea of Sticky position (Bar) for Navigation Menu to make element in
your website and blog float and remain visible. To begin with elements will be
stay in their position and then performing event of scrolling down the page,
their position will be following the scroll. This script code has been broadly
applied wildly containing on a some remarkable websites , such as Facebook ,
Hongikiat and Digitalhubinc.In this post , I'm telling about , how to use this script on your website.
 |
| Sticky Navigation Bar |
In facebook website ,
use this element on sidebar position. If you scroll down the webpage then fixed
and stick position element and remain visible. it's really cool and thrilling feature of
website.
 |
| fig: sticky sidebar position on facebook |
- How to Use Sticky Navigation Bar use with css and Jquery :
In this example , we will create a simple web page on sticky position (bar) that consist of header , navigation , content and footer parts. In this demo show how to stick and element remain visible.
- HTML Webpage code :
<div class="wrapper"> <div class="header"> Header </div> <div class="nav"> Navigation </div> <div class="content"> <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll applicake pastry. ...</p> </div></div>
And, we will apply the sticky position to the navigation.
But first, we will define the styles in the stylesheet, like so.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Then, we will apply that class to the navigation conditionally with jQuery.
$(document).ready(function() {var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.nav').addClass('sticky');} else { $('.nav').removeClass('sticky'); }};
stickyNav();
$(window).scroll(function() { stickyNav();});})
How to add this code on your blogger widget section -
css code:
First go to Blogger>>Template>>Edit HTML option then find the ]]></b:skin> keyword and paste the below css code before given keyword.
.nav {
position: -webkit-sticky; top: 45px; z-index: 1;}.nav { color: #fff;}.sticky { position: fixed; width: 1160px; left: auto;right:auto; top: 0; z-index: 100; border-top: 0;}
and after add the google api ajax code and sticky jquery code on blogger before </head> section.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='https://dl.dropboxusercontent.com/u/133500067/dhi%20posts%20code/Sticky%20Bar%20code/jquery-scrolltofixed-min.js' type='text/javascript'/> <script src='https://dl.dropboxusercontent.com/u/133500067/dhi%20posts%20code/Sticky%20Bar%20code/dhi-sticky%20code.js' type='text/javascript'/>
After this we will add navigation or widget code within below code section.
<div class="nav">
/*paste widget and navigation code within this div section*/
</div>
and save all that and see the website.
How to customize css code:
I hope so you will enjoy this post and freely use in your blog. If your are face any problem then drop the comment.
 for Navigation Menu to make element in your ...){kind=link}