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

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

最开始的方案一，是通过设置菜单条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