Why elTop in this example?

Code taken from the template for a landing page. #banner is header with navigation. And we need when scrolling down the banner disappeared. If scrollin up, it appeared again and if you reach the bottom of the website, too, so there was navigation. In General, intuitively, I understood the code but the logic of the encoder vaguely understand) Lines, where used elTop I do not understand at the household level. That is, if I take some coordinates for scrolling for example, it works for me, the behavior matches the expected banner. The would explain... clearly I have no idea what's going on.
Explain, please, if at all possible. Many thanks in advance.

$(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) { //do wScrollCurrent can be less than zero? 
 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();
July 2nd 19 at 14:10
0 answer

Find more questions by tags JavaScriptjQuery