How to create sticky widget on sidebar blogger


In the previous article I once shared a tutorial on Installing Sticky Functions
On Blogger Widgets, this time I will share a tutorial with the same function that is to make a particular widget sticky or float following the page when scrolled down and up. This tutorial is an improvement as well as answering your comment from the previous tutorial which when the page is scrolled down sticky widget will pass the Footer Wrapper and it will be a bit annoying because it blocks the widgets that are installed in the Footer area.

I will share this code more suitable to be installed on all content in Sidebar or can also be installed on one particular widget. For buddy who want to try it, please follow tutorial How to Make Sticky Widget in Sidebar Blog.

How to Create a Sticky Widget in Blog Sidebar


1. Login to Blogger --> Go to Template editor --> Put below script before </body> tag
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Change "#sticky-sidebar" with spesific ID or Change to Your ID Widgets
    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; // Distance stops at "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Distance of margin from top
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>
Notice the code marked, replace the code with the ID to be made sticky according to the template used
NOTE: #sticky-sidebar: ID of the content or widget to be made sticky
#footer-wrapper: Specify the ID to limit the sticky function
Next add the width to the content or widget that is made sticky with CSS. Suppose here I give 300px for sticky width, for example:
#sticky-sidebar{width:100%;max-width:300px}
Or:
#ID_WIDGET{width:100%;max-width:300px}
Determine the width according to the width of the sidebar of the template you use and also do not forget to replace the width on a particular query media, for example
@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

0 Response to "How to create sticky widget on sidebar blogger"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel