百度右侧导航原理

最新推荐文章于 2021-04-11 01:29:27 发布

iteye_11116

最新推荐文章于 2021-04-11 01:29:27 发布

阅读量448

点赞数

分类专栏： js 文章标签： js导航

本文链接：https://blog.csdn.net/iteye_11116/article/details/82640358

版权

js 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度百科导航</title>
<style type="text/css">
body{ padding:0px; margin:0px;}
#header{ text-align:center;}
label{ font-weight:bold;}
#menu{ width:220px; height:360px; background-color:#9F3; display:none;}
#menu ul li{ margin-top:20px;}
</style>
</head>

<body>
<div id="header"><h1>百度百科导航基本原理</h1></div>
<div id="menu">
<ul>
<li>条目一</li>
<li>条目二</li>
<li>条目三</li>
<li>条目四</li>
<li>条目五</li>
<li>条目六</li>
<li style="display:none"></li>
</ul>
</div>

<br /><br /> 

<label>条目一</label> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label>条目二</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label>条目三</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label>条目四</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label>条目五</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<label>条目六</label>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<label>&nbsp;</label>

<script type="text/javascript">
var menu=document.getElementById("menu");
var mts=document.getElementsByTagName("label");
var lis=menu.getElementsByTagName("li");
for(var i=0;i<mts.length;i++){
	mts.item(i).οnclick=function(){alert(this.offsetTop);}
	}

window.onscroll = function(){
	var ht=document.documentElement.scrollTop || document.body.scrollTop; 
	for(var i=0;i<mts.length;i++){
	if(mts.item(i).offsetTop<ht+100 && mts.item(i+1).offsetTop>ht+100){
		lis.item(i).style.color="#f00";
		lis.item(i).style.fontWeight="bold";
		}else{
		lis.item(i).style.color="#000";
		lis.item(i).style.fontWeight="normal";
		}
	}
	if(ht>100){
		menu.style.position="fixed";
		menu.style.top="100px";
		menu.style.right="50px";
		menu.style.display="block";
		}
	else{
		menu.style.position="relative";
		menu.style.display="none";
		}
	}
</script>
</body>
</html>

写道

http://pan.baidu.com/s/1gdszRYr

iteye_11116

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度右侧导航原理

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&amp
复制链接

扫一扫