How To Make Sticky Widget In Sidebar

In a previous article I shared a tutorial on Installing Grid Widget Function on Blogger, this time I will share a tutorial with the same function, namely to make certain widgets become sticky or float to follow the page when rolled down and up. This tutorial is an improvement as well as answering comments buddy from the previous tutorial that when the page is scrolled down sticky widget Footer Wrapper will pass and it will be a little annoying because it hinders the widget that is placed in the Footer area.

I will share the code that is better suited installed on all content in the Sidebar or can be mounted on one widget so friend who wants to try it, please follow the tutorial How to Make Sticky Widget in Sidebar Blog.

How to Make Sticky Widget in Sidebar Blog

1. Log in to Blogger> Open Template editor> Add the following code before the </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Replace "#sticky-sidebar" with a particular ID
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Stopping distances in "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Spacing or margin sticky from above
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Note the marked code, replace the code with the ID that will be made in accordance sticky template used

#sticky-sidebar : ID of the content or widgets that will be made sticky

#footer-wrapper : Determine the ID to limit the functions of sticky

Next add the width of the content or widgets that made sticky with CSS. Suppose here I give to the width 300px sticky, for example:

#sticky-sidebar{width:100%;max-width:300px}

#HTML1{width:100%;max-width:300px}

Determine the width according to the width of the sidebar on the template my friend use and also do not forget to change the width of the media specific query, for example:

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Easy enough right? Good luck and successful greeting.

Menu

How To Make Sticky Widget In Sidebar