Плавающий блок и адаптивный дизайн. Как закрепить подвал при изменении ширины окна?

Question

Дмитрий @lonetek

JavaScript

Плавающий блок и адаптивный дизайн. Как закрепить подвал при изменении ширины окна?

Здравствуйте!
Есть код для длинного плавающего сайдбара, который может не влезать в окно браузера по высоте, при этом он прокручивается вместе с содержимым, но фиксируется при достижении своего верха или низа. Код вполне рабочий, но есть одна проблемка. Дизайн адаптивный. Если страница прокручена вниз до конца, при этом изменить ширину окна, то блок с содержимым вместе с футером начинают скакать вверх-вниз, а сайдбар остается на месте, т.к. его координаты вычислены скриптом и не меняются. Вот так это выглядит в оригинале: sticky01.blogspot.ru/2015/05/1.html

(function(){
var a = document.querySelector('#menu-sidebar'), b = null, K = null, Z = 0, P = 0, N = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);

function Ascroll() {
  var Ra = a.getBoundingClientRect(),
      R1bottom = document.querySelector('#wrapper').getBoundingClientRect().bottom;
  if (Ra.bottom < R1bottom) {
    if (b == null) {
      var Sa = getComputedStyle(a, ''), s = '';
      for (var i = 0; i < Sa.length; i++) {
        if (Sa[i].indexOf('height') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('width') == 0 || Sa[i].indexOf('background') == 0) {
          s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
        }
      }
      b = document.createElement('div');
      b.className = "stop";
      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 Rb = b.getBoundingClientRect(),
        Rh = Ra.top + Rb.height,
        W = document.documentElement.clientHeight,
        R1 = Math.round(Rh - R1bottom),
        R2 = Math.round(Rh - W);
    if (Rb.height > W) {
      if (Ra.top < K) {  
        if (R2 + N > R1) {  
          if (Rb.bottom - W + N <= 0) {  
            b.className = 'sticky';
            b.style.top = W - Rb.height - N + 'px';
            Z = N + Ra.top + Rb.height - W;
          } else {
            b.className = 'stop';
            b.style.top = - Z + 'px';
          }
        } else {
          b.className = 'stop';
          b.style.top = - R1 +'px';
          Z = R1;
        }
      } else {  
        if (Ra.top - P < 0) {  
          if (Rb.top - P >= 0) {  
            b.className = 'sticky';
            b.style.top = P + 'px';
            Z = Ra.top - P;
          } else {
            b.className = 'stop';
            b.style.top = - Z + 'px';
          }
        } else {
          b.className = '';
          b.style.top = '';
          Z = 0;
        }
      }
      K = Ra.top;
    } else {
      if ((Ra.top - P) <= 0) {
        if ((Ra.top - P) <= R1) {
          b.className = 'stop';
          b.style.top = - R1 +'px';
        } else {
          b.className = 'sticky';
          b.style.top = P + 'px';
        }
      } else {
        b.className = '';
        b.style.top = '';
      }
    }

  }
}
})()

Мысль идет в сторону window.addEventListener('resize', function()
но какое условие задать для функции и в каком месте нужно ее вставить, пока не могу разобраться. Подскажите, как доработать код.

Благодарю за внимание!