Плавающий сайдбар

 
/* = Плавающие блоки - DeDja - 05.03.18 = */
.sticky {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
  z-index: 101;
}
.sticky1 {
  position: fixed;
  z-index: 101;
}
.stop1 {
  position: relative;
  z-index: 101;
}
 

 
            <?php if($is_sidebar){ ?>
                <aside>
 
                    <div class="widget_ajax_wrap" id="widget_pos_right-top"><?php $this->widgets('right-top'); ?></div>
                    <div class="widget_ajax_wrap" id="widget_pos_right-center"><?php $this->widgets('right-center'); ?></div>
                    <div class="widget_ajax_wrap" id="widget_pos_right-bottom"><?php $this->widgets('right-bottom'); ?></div>
 
<!--  ниже дополнительно   -->
 
<div class="sticky-block1" style="padding: 0px 0px;">
<div style="height: 250px;  padding: 13%; background: #fff; opacity: 1; text-align: center;">
<a href="/media/v4/v4.html" title="&quot;О ежедневных людских подвигах&quot;"><img src="/templates/default/images/noreklam.png"/></a>
 
<br>
<br>
<br>
 
<a href="/media/v5/v5.html" title="&quot;МЭРИЯ - ВСЁ БУДЕТ СРЕДНЕ!&quot;"><img src="/templates/default/images/ping.gif"/></a>
</div>
</div>
 
<script>
(function(){
var a = document.querySelector('.sticky-block1'), b = null, P = 0;
//	если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. 
//	Может быть отрицательным числом
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
  if (b == null) {
    var Sa = getComputedStyle(a, ''), s = '';
    for (var i = 0; i < Sa.length; i++) {
      if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
      }
    }
    b = document.createElement('div');
    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
    a.insertBefore(b, a.firstChild);
    var l = a.childNodes.length;
    for (var i = 1; i < l; i++) {
      b.appendChild(a.childNodes[1]);
    }
    a.style.height = b.getBoundingClientRect().height + 'px';
    a.style.padding = '0';
    a.style.border = '0';
  }
  var Ra = a.getBoundingClientRect(),
      R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('footer').getBoundingClientRect().top + 20);
//	селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент;  Math.round() только для IE; 
//	если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop1';
      b.style.top = - R +'px';
    } else {
      b.className = 'sticky1';
      b.style.top = P + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
  }
  window.addEventListener('resize', function() {
    a.children[0].style.width = getComputedStyle(a, '').width
  }, false);
}
})()
</script>
 
<!--  выше дополнительно   -->
 
                </aside>
            <?php } ?>