How to Make a Sticky Widget on the Sidebar Blog

In the previous article I have shared a tutorial on Installing Sticky Functions on Blogger Widgets, this time I will share the tutorial with the same function, namely to make certain widgets sticky or drift following the page when rolled down and up. This tutorial is an improvement as well as answering your comments from the previous tutorial that when the page scrolls down the sticky widget will pass the Footer Wrapper and it will be a little annoying because it blocks the widget installed in the Footer area.

The code that I will share is more suitable to be installed on all content in the Sidebar or it can also be installed in one of the specific widgets. For those of you who want to try it, please follow the tutorial How to Make a Sticky Widget on the Sidebar Blog.


1. Login to Blogger> Open Template editor> Add the code below before </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Change "# sticky-sidebar" with a specific 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; // The distance stops in "# footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Distance or sticky margin from above
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Note the code marked, change the code with the ID that will be sticky according to the template used

# sticky-sidebar: ID of content or widget that will be sticky
# footer-wrapper: Specify the ID to limit the sticky function

Then add width to the content or widget that is sticky with CSS. Suppose here I give 300px for sticky width, for example:

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

Or

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

Specify the width according to the sidebar width of the template that you use and also do not forget to change the width in certain media queries, for example:

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

For a Sticky Widget display demo, please click the button below:





Easy enough isn't it? Good luck and successful greetings.