菜单栏下拉至固定位置保持不动，为什么这样修改top值不变？

Question

以下代码原来的 sideBarRight.style.top 是260px，想通过下拉网页修改top值：

var sideBarRight = document.querySelector('.sideBar_right ul');
var sideBarRightTop = sideBarRight.offsetTop;  
var currentTop = '';

document.body.onscroll = function() {
    var docScrollH = document.documentElement.scrollTop; 
    if (docScrollH > sideBarRightTop ) {
        sideBarRight.style.position = 'fixed';
         sideBarRight.style.top = '75px';
    }
    else {
        sideBarRight.style.position = 'absolute';
         sideBarRight.style.top = currentTop; 
    }
}

currentTop一开始是一个空值，如果直接执行else里面的代码块（网页往下拉一点点不要超出scrollTop的值），为什么currentTop还是能以原来260px的值显示出来?
同样的代码，如果之前写的是var currentTop;先不给变量赋值，下面先执行if里的代码块，然后再执行else里的代码块，这时sideBarRight.style.top为什么又会变成75px？
是null和undefined变量类型的区别吗？

Answer 1

当一个变量被声明但未被赋值时，它的值为undefined。在第二个代码中，currentTop被声明但未被赋值，因此它的值为undefined。在if代码块中，sideBarRight.style.top被设置为75px，但是在else代码块中，currentTop被用于将sideBarRight.style.top设置为当前位置的值。由于currentTop的值为undefined，因此sideBarRight.style.top被设置为当前位置的值。

在第一个代码中，currentTop被赋值为空字符串，因此它的值不是undefined。如果直接执行else代码块，currentTop将保留原来的值，即260px。因此，sideBarRight.style.top被设置为260px。