Installing Sticky Functions on Blogger Widgets

Installing Sticky Functions on Blogger Widgets - Ok, on this occasion I will share tips on how to install the sticky function on blogger widgets, the function of sticky on this widget is useful for friends who want a widget on the blog so that it can fly following the page when rolled down and will return to its original position when the page is rolled up.

We just go to the method of application:

HOW 1

1. Open Blogger> Click Template> Edit HTML> Copy and apply the code below just before </body>

As an example the widget that will be made sticky is a widget with ID # HTML1

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1");
//]]>
</script>

Specify the widget ID in the marked code.

Also read: Some Functional Tag Functions on Widgets

2. Then save the code below before ]]>< b:skin> or </style>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

Please set the code above according to taste.

3. Save the template and see the results.

HOW 2

1. Or you can also use this code, as an example of a widget that will be made sticky is a widget with ID #idecontent

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

Specify the widget ID in the marked code.

2. Save the code below before ]]</b:skin> or </style>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

Add position: absolute attribute; on the widget and set the widget position when the page is rolled up top: 20px;

3. Save the template and see the results.

#sidecontent@media only screen and (max-width:640px){
.makesticking{position:relative!important;z-index:initial}}

You can install this sticky on any widget or content as needed.

Additional:

Application of the sticky function on the horizontal menu only with CSS

4. Specify the class or ID in the code below according to the template you are using

.arlinatop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)}

Just about how to Install Sticky Functions on Blogger Widgets, good luck.