想做个随屏幕滚动儿滚动的垂直导航
想做个随屏幕滚动儿滚动的垂直导航，没思路了。。。。请教这样的效果应该怎么实现呀
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 联系</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:950px; margin:0 auto; position:relative;}
ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;}
ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head>
<body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = "365px";
nav.style.left = "-100px";
window.onscroll = function(){
//alert("100+");
}
//alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>固定悬浮垂直导航 - 联系</title>
<style>
body { margin:0;}
ul,li { display:block; margin:0; padding:0; list-style-type:none;}
#wrap { width:950px; margin:0 auto; position:relative;}
ul#ul li { height:255px; font-size:100px; text-align:center; line-height:200px; color:white;}
ul#ul li.li1 { background:black;}
ul#ul li.li2 { background:green;}
ul#ul li.li3 { background:blue;}
ul#ul li.li4 { background:red;}
ul#ul li.li5 { background:yellow;}
ul#nav { width:100px; background:purple; color:#AAA; border0:1px solid #CCC; position:absolute;}
</style>
<script src="http://jhi.me/source/global.js"></script>
</head>
<body>
<script>
function initAll(){
var lis = document.getElementById("ul").getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
addClass(lis[i],"li" + (i + 1))
}
}
function initNav(){
var wrap = document.getElementById("wrap");
var nav = document.getElementById("nav");
nav.style.top = "365px";
nav.style.left = "-100px";
window.onscroll = function(){
sTop = document.body.scrollTop
[解决办法]
document.documentElement.scrollTop;
nav.style.top = sTop + 365 + 'px'
}
//alert("test");
}
addLoadEvent(initAll);
addLoadEvent(initNav);
</script>
<div id="wrap">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</body>
</html>
<style type="text/css">
.fixed {
position: fixed;
}
</style>
