How To Make Floating "Sticky" Widgets In Blogger With Jquery Sticky Plugin

You might have seen some websites with floating sticky widgets that don't scroll with page and you wondered how it can be done? Answer is, you can easily do this by using Jquery. Today I am gonna share a Jquery sticky plugin by using which you can create sticky widgets in blogger. Today almost every website or blog has Jquery installed in it that makes many functions easier. Making an HTML element sticky is a messy task if done with only HTML and CSS but using Jquery makes it a lot easier.

Read More: Create Stylish CSS Tables In Blogger

Before going further you must know the difference between "Sticky" and "Fixed" elements. Fixed element is the one that remains fixed at a position declared by CSS. It remains on one place only and its position isn't changed with scrolling. Normally top navigation bars are kept fixed as you can observe in this blog too. "Sticky" element is somewhat different from fixed in the sense that it moves with page with scrolling until it reaches to specified position and then remains fixed. That looks more professional and organized than "Fixed" elements.

Read More: Install Multiple Comment Systems In Blogger

In this tutorial, we are going to make our widgets sticky with the help of Jquery "Sticky" plugin. This plugin is originally created by Anthony Garand, a United States front-end developer and is available on Github for public use. I am just explaining the method how it could be used in blogger platform. See a demo here.

Lets start.

How To Make Sticky Widget In Blogger

1. Login to your blogger account. Go to Template > Edit HTML.

2. HTML template editor for your blog will be open. Now click anywhere inside the template and press CTRL+F.

3. Search for </head> tag and paste the following peace of code just above it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

4. Skip step 3 if you have Jquery already installed in your blog and move to step 5.

5. Search for </body> tag and just above it, paste the following code. This is the actual Sticky plugin.

<script>
//<[!CDATA[
// Sticky Plugin v1.0.4 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 02/14/2011
// Date: 07/20/2015
// Website: http://stickyjs.com/
// Description: Makes an element on the page stick on the screen as you scroll
//              It will only set the 'top' and 'position' of your element, you
//              might need to adjust the width in some cases.
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else if(typeof module==='object'&&module.exports){module.exports=factory(require('jquery'));}else{factory(jQuery);}}(function($){var slice=Array.prototype.slice;var splice=Array.prototype.splice;var defaults={topSpacing:0,bottomSpacing:0,className:'is-sticky',wrapperClassName:'sticky-wrapper',center:false,getWidthFrom:'',widthFromWrapper:true,responsiveWidth:false,zIndex:'auto'},$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,l=sticked.length;i<l;i++){var s=sticked[i],elementTop=s.stickyWrapper.offset().top,etse=elementTop-s.topSpacing-extra;s.stickyWrapper.css('height',s.stickyElement.outerHeight());if(scrollTop<=etse){if(s.currentTop!==null){s.stickyElement.css({'width':'','position':'','top':'','z-index':''});s.stickyElement.parent().removeClass(s.className);s.stickyElement.trigger('sticky-end',[s]);s.currentTop=null;}}
else{var newTop=documentHeight-s.stickyElement.outerHeight()
-s.topSpacing-s.bottomSpacing-scrollTop-extra;if(newTop<0){newTop=newTop+s.topSpacing;}else{newTop=s.topSpacing;}
if(s.currentTop!==newTop){var newWidth;if(s.getWidthFrom){newWidth=$(s.getWidthFrom).width()||null;}else if(s.widthFromWrapper){newWidth=s.stickyWrapper.width();}
if(newWidth==null){newWidth=s.stickyElement.width();}
s.stickyElement.css('width',newWidth).css('position','fixed').css('top',newTop).css('z-index',s.zIndex);s.stickyElement.parent().addClass(s.className);if(s.currentTop===null){s.stickyElement.trigger('sticky-start',[s]);}else{s.stickyElement.trigger('sticky-update',[s]);}
if(s.currentTop===s.topSpacing&&s.currentTop>newTop||s.currentTop===null&&newTop<s.topSpacing){s.stickyElement.trigger('sticky-bottom-reached',[s]);}else if(s.currentTop!==null&&newTop===s.topSpacing&&s.currentTop<newTop){s.stickyElement.trigger('sticky-bottom-unreached',[s]);}
s.currentTop=newTop;}
var stickyWrapperContainer=s.stickyWrapper.parent();var unstick=(s.stickyElement.offset().top+s.stickyElement.outerHeight()>=stickyWrapperContainer.offset().top+stickyWrapperContainer.outerHeight())&&(s.stickyElement.offset().top<=s.topSpacing);if(unstick){s.stickyElement.css('position','absolute').css('top','').css('bottom',0).css('z-index','');}else{s.stickyElement.css('position','fixed').css('top',newTop).css('bottom','').css('z-index',s.zIndex);}}}},resizer=function(){windowHeight=$window.height();for(var i=0,l=sticked.length;i<l;i++){var s=sticked[i];var newWidth=null;if(s.getWidthFrom){if(s.responsiveWidth){newWidth=$(s.getWidthFrom).width();}}else if(s.widthFromWrapper){newWidth=s.stickyWrapper.width();}
if(newWidth!=null){s.stickyElement.css('width',newWidth);}}},methods={init:function(options){var o=$.extend({},defaults,options);return this.each(function(){var stickyElement=$(this);var stickyId=stickyElement.attr('id');var wrapperId=stickyId?stickyId+'-'+defaults.wrapperClassName:defaults.wrapperClassName;var wrapper=$('<div></div>').attr('id',wrapperId).addClass(o.wrapperClassName);stickyElement.wrapAll(function(){if($(this).parent("#"+wrapperId).length==0){return wrapper;}});var stickyWrapper=stickyElement.parent();if(o.center){stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});}
if(stickyElement.css("float")==="right"){stickyElement.css({"float":"none"}).parent().css({"float":"right"});}
o.stickyElement=stickyElement;o.stickyWrapper=stickyWrapper;o.currentTop=null;sticked.push(o);methods.setWrapperHeight(this);methods.setupChangeListeners(this);});},setWrapperHeight:function(stickyElement){var element=$(stickyElement);var stickyWrapper=element.parent();if(stickyWrapper){stickyWrapper.css('height',element.outerHeight());}},setupChangeListeners:function(stickyElement){if(window.MutationObserver){var mutationObserver=new window.MutationObserver(function(mutations){if(mutations[0].addedNodes.length||mutations[0].removedNodes.length){methods.setWrapperHeight(stickyElement);}});mutationObserver.observe(stickyElement,{subtree:true,childList:true});}else{stickyElement.addEventListener('DOMNodeInserted',function(){methods.setWrapperHeight(stickyElement);},false);stickyElement.addEventListener('DOMNodeRemoved',function(){methods.setWrapperHeight(stickyElement);},false);}},update:scroller,unstick:function(options){return this.each(function(){var that=this;var unstickyElement=$(that);var removeIdx=-1;var i=sticked.length;while(i-->0){if(sticked[i].stickyElement.get(0)===that){splice.call(sticked,i,1);removeIdx=i;}}
if(removeIdx!==-1){unstickyElement.unwrap();unstickyElement.css({'width':'','position':'','top':'','float':'','z-index':''});}});}};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(method){if(methods[method]){return methods[method].apply(this,slice.call(arguments,1));}else if(typeof method==='object'||!method){return methods.init.apply(this,arguments);}else{$.error('Method '+method+' does not exist on jQuery.sticky');}};$.fn.unstick=function(method){if(methods[method]){return methods[method].apply(this,slice.call(arguments,1));}else if(typeof method==='object'||!method){return methods.unstick.apply(this,arguments);}else{$.error('Method '+method+' does not exist on jQuery.sticky');}};$(function(){setTimeout(scroller,0);});}));
//]]>
</script>

6. Now again search the </body> tag and paste the following code just above it.

<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>

7. Replace "sticker" (without quotes) with the widget ID or ID of the HTML element you want to make sticky and then press save template.

I hope most of you already know the method of finding widget ID in blogger but if you don't know then read below the steps to find widget ID in blogger.

Read More: Create Custom 404 Error Pages In Blogger

How To Find Widget ID in Blogger

1. Login to your blogger account and go to Layout.

2. You would see all of your blog gadgets arranged. Locate the widget whose widget ID is required.

You would see an "Edit" button assigned to each widget. Just click on that button for the required widget.

3. A pop-up window will open, maximize it to see the URL bar where you will find multiple IDs. The last ID written as "widgetId='your_id' " is the widget ID for that gadget. Write the value of widget ID in the above code.

For example your widget ID is HTML4 so replace

$("#sticker").sticky({topSpacing:0});
with
$("#HTML4").sticky({topSpacing:0});

Here the tutorial ends. I hope you have understood the complete method. With this method you can make any widget Sticky in blogger either on sidebar or the navigation menu. If you still have any confusion making your widgets sticky. Feel free to ask us in comments.