菜单置顶 选中效果

菜单置顶

 

body    <div id="tb" style="width:100%; height:200px; background-color:#00F;"></div>
    　　  <div id="td" style="width:100%; height:100px; background-color:#C00;"></div>
   　　   <div id="tt" style="width:100%; height:1200px; background-color:#0F0;"></div>
    　　  <input type="button" value="aan" onclick="hui()"/>

 

        function hui()
	{
		window.scrollTo(0,200);（x.y）
	}                                              按钮置顶（点击按钮回到x.y轴的位置）

用等于调起函数（匿名）
        window.onscroll = function ()
	{
		var tb = document.getElementById("tb");
		var td = document.getElementById("td");
		var l = tb.style.height;
 当页面的滚动条大于等于tb的长度时  让td置顶  用绝对定位离上边框0px
		if(window.scrollY >= parseInt(l))
		{
			td.style.position = "fixed";
			td.style.top = "0px";
		}
小于tb时位置不变  用相对定位
		else
		{
			td.style.position = "relative";
		}
	}

  

选中效果

 css样式
.xiang{
			width:100px;
			height:40px;
			background-color:#00F;
			margin:2px auto;
			text-align:center;
			vertical-align:middle;
			line-height:40px;
			
		}

 

body部分
<div id="caidan">
    	<div class="xiang" onmousemove="bian(this)" onmouseout="hui(this)" onclick="dian(this)">栏目一</div>
        <div class="xiang" onmousemove="bian(this)" onmouseout="hui(this)" onclick="dian(this)">栏目一</div>
        <div class="xiang" onmousemove="bian(this)" onmouseout="hui(this)" onclick="dian(this)">栏目一</div>
    </div>

 

js
点击选中
 function dian(a)
	{	找到元素 class用for循环恢复样式
		var xiang = document.getElementsByClassName("xiang")
		for(i=0; i<xiang.length; i++)
		{
			xiang[i].style.backgroundColor = "#00F";
               也要恢复点击的属性
			xiang[i].removeAttribute("jk")
		}
               点击变色
		a.style.backgroundColor = "red";
               自定义属性代表选中
		a.setAttribute("jk",1)
	}
鼠标移上变色
	function bian(a)
	{	
		var xiang = document.getElementsByClassName("xiang")
		for(i=0; i<xiang.length; i++)
		{
       也是先恢复样式 但是点击的选项就不能恢复了 用点击的自定义属性不等于值得时候排除。  
			if(xiang[i].getAttribute("jk")!=1)
			{
				xiang[i].style.backgroundColor = "#00F";
			}
		}
  其余的变红色
		a.style.backgroundColor = "red";
	}
鼠标移开恢复原先的样式  就跟上面一样清除样式就行了
	function hui(a)
	{	
		var xiang = document.getElementsByClassName("xiang")
		for(i=0; i<xiang.length; i++)
		{
			if(xiang[i].getAttribute("jk")!=1)
			{
				xiang[i].style.backgroundColor = "#00F";
			}
		}
	}