Зачем elTop в этом примере?

Question

[PlasterTom]

Код взят из шаблона для лендинга. #banner - это хэдер с навигацией. И нам нужно, чтобы при скроллинге вниз этот баннер исчезал. Если скроллим вверх, то появлялся вновь и если достигаем дна сайта, то тоже чтоб появлялась навигация. В целом интуитивно я разобрался в коде, но логику кодера смутно понимаю) Строчки, где используется elTop мне не понятны на бытовом уровне. То есть если я беру какие-то координаты скролла для примера, у меня все сходится, поведение баннера соответствует ожидаемому. Нокак бы объяснить... наглядно я не представляю, что происходит.
Объясните, пожалуйста, если это вообще возможно. Заранее огромное спасибо.

$(window).on('resize', function() {
  'use strict';
  var element	= document.querySelector('#banner'),
      elHeight = 0,
      elTop = 0,
      dHeight	= 0,
      wHeight	= 0,
      wScrollCurrent = 0,
      wScrollBefore	= 0,
      wScrollDiff	= 0; 
      window.addEventListener('scroll', function () {
        // Hide the displayed menu. If you want to scroll, you're obviously not interested in the options.
        $('.navbar-collapse').collapse('hide'); // 
        $('.navbar-toggle').addClass('collapsed').blur();
        if($(window).width() <= 768) {
          elHeight = element.offsetHeight;//
          dHeight = document.body.offsetHeight;//
          wHeight = window.innerHeight;//
          wScrollCurrent = window.pageYOffset; //
          wScrollDiff = wScrollBefore - wScrollCurrent;//
          elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;//

          // scrolled to the very top; element sticks to the top
          if(wScrollCurrent <= 0) { //разве wScrollCurrent может быть меньше нуля? 
              element.style.top = '0px';
          } // scrolled up; element slides in
            else if(wScrollDiff > 0) {
              element.style.top = (elTop > 0? 0 : elTop) + 'px'; 
          } // scrolled down
            else if(wScrollDiff < 0) {
              // scrolled to the very bottom; element slides in
              if(wScrollCurrent + wHeight >= dHeight - elHeight) {  
                element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';
              } // scrolled down; element slides out
                else { element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px'; }//
            }
          wScrollBefore = wScrollCurrent;
        } //
          else element.style.top = '0px';
      });
}).resize();