关于JavaScript固定菜单栏定位的代码分析
本文分析一段JavaScript代码，该代码用于实现页面滚动时侧边栏固定定位的效果。代码旨在使侧边栏在页面滚动超过一定距离后固定在距离顶部75像素的位置。我们将探讨currentTop变量的不同赋值方式对最终结果的影响。
代码如下：
var sideBarRight = document.querySelector('.sideBar_right ul');
var sideBarRightTop = sideBarRight.offsetTop;
var currentTop = ''; // 或者 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变量旨在存储侧边栏初始的top值。然而，其初始值（空字符串或未定义）会影响最终的sideBarRight.style.top值。
立即学习“Java免费学习笔记（深入）”；
不同currentTop值下的行为：
-
currentTop = ''(空字符串): 如果currentTop初始化为空字符串，当页面滚动未超过sideBarRightTop时（执行else块），sideBarRight.style.top会被设置为空字符串。浏览器会将空字符串解释为默认值，导致sideBarRight的top值恢复到其初始样式值（例如260px）。 -
var currentTop;(未赋值): 如果currentTop未赋值，则其值为undefined。当页面滚动超过sideBarRightTop，然后又滚动回到初始位置（先执行if块，再执行else块），sideBarRight.style.top会被设置为undefined。浏览器会忽略undefined值，因此sideBarRight.style.top保持if块中设置的'75px'。
结论：
关键不在于null和undefined的区别，而在于JavaScript如何处理不同类型的值赋予style.top属性。空字符串("")会被视为一个有效值，而undefined会被浏览器忽略，保留之前的样式设置。这体现了JavaScript在处理空值和未定义值在CSS样式赋值时的不同行为。为了确保代码可靠性，建议在else块中，显式地将sideBarRight.style.top设置为sideBarRightTop + 'px'，以确保侧边栏回到其初始位置。 改进后的代码如下：
var sideBarRight = document.querySelector('.sideBar_right ul');
var sideBarRightTop = sideBarRight.offsetTop;
var currentTop = sideBarRightTop;
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 + 'px';
}
}; 
