How To Make Blogger Widgets Sticky That Scrolls With Page

A sticky widget that remains on static section of your site and when a user scrolls down the page a certain point it floats on top (center, left or right any position you layout) and it continues floating until the user scrolls up the page to the widget's position. The sticky widget is run by jQuery that gives you the ability to make any element on your page always stay visible. There are three parts of this stick plugin 1. Include jQuery & Sticky 2. Call Sticky and 3. Enjoy.

The recipe i'm going to share with you all a sticky plugin that runs on blogger templates with jQuery supports and its ability to make any widget section sticky or anything you want to make floating on top of your page.

Benefits of this plugin:

You can make any widget sticky no matter whether its adsense ads, banner, text or any promotional content that you want to specialize your readers. But be careful of correctly using the code otherwise wrong installation may hamper other widgets. Go ahead and enjoy the plugin.

Live Demo

Make Blogger Widgets Sticky : JavaScript Installation

1. First of all go to Blogger > Template section
2. Now backup your template for your safe side
3. Click on Edit HTML
4. Now search for </head> tag
5. Simply copy following jQuery code and add before </head> tag

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

6. Again search for </body>
7. Now add following code right before </body> tag

<script>
/*<![CDATA[*/

(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', '');
            s.stickyElement.parent().removeClass(s.className);
            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) {
            s.stickyElement
              .css('position', 'fixed')
              .css('top', newTop);

            if (typeof s.getWidthFrom !== 'undefined') {
              s.stickyElement.css('width', $(s.getWidthFrom).width());
            }

            s.stickyElement.parent().addClass(s.className);
            s.currentTop = newTop;
          }
        }
      }
    },
    resizer = function() {
      windowHeight = $window.height();
    },
    methods = {
      init: function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
          var stickyElement = $(this);

          var stickyId = stickyElement.attr('id');
          var wrapper = $('<div></div>')
            .attr('id', stickyId + '-sticky-wrapper')
            .addClass(o.wrapperClassName);
          stickyElement.wrapAll(wrapper);

          if (o.center) {
           

stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"aut

o"});
          }

          if (stickyElement.css("float") == "right") {
            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
          }

          var stickyWrapper = stickyElement.parent();
          stickyWrapper.css('height', stickyElement.outerHeight());
          sticked.push({
            topSpacing: o.topSpacing,
            bottomSpacing: o.bottomSpacing,
            stickyElement: stickyElement,
            currentTop: null,
            stickyWrapper: stickyWrapper,
            className: o.className,
            getWidthFrom: o.getWidthFrom
          });
        });
      },
      update: scroller
    };

  // 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(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.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');
    }
  };
  $(function() {
    setTimeout(scroller, 0);
  });
})(jQuery);

/*]]>*/
</script>

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

Script Credit: Anthony Garand

8. Now search for your sidebar widget that you want to make sticky

9. On template editor search for ='sidebar-wrapper or only ='sidebar

10. Look carefully of every single widget below sidebar-wrapper

          <b:widget id='HTML1' locked='false' title='' type='HTML'>
            <b:includable id='main'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

</b:includable>
          </b:widget>

11. Now change this widget into following format

          <b:widget id='HTML1' locked='false' title='' type='HTML'>
            <b:includable id='main'>

<div id='sticker'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div></div>


</b:includable>
          </b:widget>

Explanations: 

You might be noticing that we've wrapped the content of this widget within a yellow highlighted <div tag. Or you can add <div id='sticker'> after <b:includable id='main'> and add an extra </div> end tag before </b:includable>

12. You can do so for every widget of your template

13. Finally save your template and you're all done!

Note: If your template includes jQuery V 1.4.2 or upgrade then ignore adding jQuery script on step #5

Check The Functions of Script

Please don't forget to check the functions of script either it's working for your template or not. I have tested the functions of script on my blog and it's working fine so i decided to share it with you all and hope that it will work for your custom template.

Anyway if you find trouble regarding the functions of the script don't forget to ask me, your feedback is almost appreciated to us. Peace and blessings pals :)