网页滚动时固定顶部菜单的位置 - 两种方案比较

在网页滚动时，经常需要将菜单条固定在屏幕的顶部位置。

最开始的方案一，是通过设置菜单条Div的position属性为absolute，top为0实现的：
window.onscroll = function()
{
var t = document.documentElement.scrollTop || document.body.scrollTop;

if( t >= 62 )
{
//当scrollTop值大于某个数值时，显示浮动菜单条
var topMenuFloat = document.getElementById("topMenuFloat")
if(topMenuFloat)
{
topMenuFloat.style.top = t +"px";
}
else
{
//如果没有浮动菜单条，则克隆一个
var newNode = document.getElementById("topMenu").cloneNode(true);
newNode.id = "topMenuFloat";
document.body.appendChild(newNode);
newNode.style.position = "absolute";
newNode.style.top = t +"px";
}
}
else
{
//当scrollTop值小于某个数值时，删除浮动菜单条
var topMenuFloat = document.getElementById("topMenuFloat")
if(topMenuFloat)
{
topMenuFloat.parentNode.removeChild(topMenuFloat);
}
}
}
方案一的问题是，在网页上下滚动时，顶部的浮动菜单会出现闪烁现象，影响用户体验。

于是对代码进行优化，以下是方案二的代码：
window.onscroll = function()
{
var t = document.documentElement.scrollTop || document.body.scrollTop;

if( t >= 62 )
{
//当scrollTop值大于某个数值时，显示浮动菜单条
var topMenuFloat = document.getElementById("topMenuFloat")
if(topMenuFloat)
{
//topMenuFloat.style.top = t +"px";
}
else
{
//如果没有浮动菜单条，则克隆一个
var newNode = document.getElementById("topMenu").cloneNode(true);
newNode.id = "topMenuFloat";
document.body.appendChild(newNode);
newNode.style.position = "fixed";
newNode.style.top = "0px";
}
}
else
{
//当scrollTop值小于某个数值时，删除浮动菜单条
var topMenuFloat = document.getElementById("topMenuFloat")
if(topMenuFloat)
{
topMenuFloat.parentNode.removeChild(topMenuFloat);
}
}
}

方案二主要是将postion属性修改为fixed，这样的话当网页滚动时，菜单条不再出现闪烁现象。进入以下页面可以查看实际效果：http://coolketang.com/psscript/menu1lesson1.php