How to Stick Header or Menubar on Scroll Down With jQuery

I have seen lot of other cases where jQuery simply rocks, such as its ability to talk to any DOM (Document Object Model) element and its powerful event (mouse click etc.) handling engine. I like to learn, use & share  jQuery tutorials and coding. then today i’ll show you how to stick header or menubar on scroll down.

Previously i was shared full tutorial on how to create sticky sidebar widget for blogger and wordpress, but we can do more with the same coding, actually i tried to stick header and menubar for new release “Margin” blogger template, and really it’s working great, so I’m here with the full tutorial on how to stick header or menubar on scroll down the page for blogger.

Not only header or menubar, We can stick anything by this simple jQuery . but let’s start to learn with how to stick header or menubar as example,  I’m sure after reading the full post you will understand automatically that how to stick any element, widget using the jQuery.

How to Stick Header?

So let’s start with stick the header (header wrapper)

• First of all go to blogger—>Template–>Edit HTML
• CTRL + F to find </head> in your blogs HTML
• Copy and paste below code just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// For blogger by : http://www.makingdifferent.com

(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};

// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}

$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";

stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>

If your blog have already jQuery plugin then simply remove red colored line in above code.

• Next search for </body>
• Copy and paste below code just above it.

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickmania&quot;).sticky({topSpacing:0});
});
</script>

• Now search for below code in your blogs HTML

<div id='header-wrapper'>

Or

<div class='header-wrapper'>

• Full code will look like this :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blogs Name (Header)' type='Header'>
<b:includable id='main'>
/---------Some code here-----/
</b:includable>
</b:widget>
</b:section>
</div>

• Now Copy and paste below code just above <div id=’header-wrapper’>

<div id="mdstickmania">

• Now close the “div” by adding </div> at end of the code.

• Finally your code will look like this :

<div id="mdstickmania">
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blogs Name (Header)' type='Header'>
<b:includable id='main'>
/---------Some code here-----/
</b:includable>
</b:widget>
</b:section>
</div>
</div>

Now save your template and see the result. Now visitors will see your sticky header when they scroll down.

How to Stick Menubar?

Whenever you want to stick menubar then you need to add <div id=”mdstickmania”> in your menubar HTML code and close the “div” as example below :

<div id="mdstickmania">
<ul class="classname">
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Contact us</a></li>
<li><a href='#'>Become an author</a></li>
<li><a href='#'>Submit tips</a></li>
</ul>
</div>

Now i think you have understand that how it works and how to stick other elements of your blogs, if you still not understand then watch short video here.