Dark
Beranda CSS HTML Javascript jQuery Tips Blogger

Installing Sticky Functions On Blogger Widgets

Oleh Admin
10 Sep 2018
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.

On the widget
Berbagi :