<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ancher</title>
<script type="text/javascript" src="resource/scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<div style="height:1200px;padding:10px 100px;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="navId" style="border:1px solid #666;height:40px;">
<ul>
<li style="float:left;margin:0 10px;" id="1"><a href="javascript:;" onclick="operPage.onAncher('0')">1</a></li>
<li style="float:left;margin:0 10px;" id="2"><a href="javascript:;" onclick="operPage.onAncher('1')">2</a></li>
<li style="float:left;margin:0 10px;" id="3"><a href="javascript:;" onclick="operPage.onAncher('2')">3</a></li>
</ul>
</div>
<div style="" id="111"><br><br><br>111<br>122<br>133<br>144<br><br><br><br><br><br><br><br><br></div>
<div style="" id="222"><br><br><br>222<br><br><br><br><br><br><br><br></div>
<div style="" id="333"><br><br><br>333<br><br><br><br><br><br><br><br></div>
<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>
</div>
</body>
</html>
<script type="text/javascript">
var operPage = {
navH : 0,
h1 : 0,
h2 : 0,
h3 : 0,
topArr : new Array(),
init : function(){
this.navH = $("#navId").offset().top;
this.h1 = $("#111").offset().top;
this.h2 = $("#222").offset().top;
this.h3 = $("#333").offset().top;
this.topArr.push(this.h1);
this.topArr.push(this.h2);
this.topArr.push(this.h3);
this.onFixNav();
$(window).scroll(function(){this.onFixNav()}.bind(this));
},
onFixNav : function(){
var scroH = $(document).scrollTop()+20;
if(this.navH <= scroH){
$("#navId").css({"position":"fixed","top":0});
}else{
$("#navId").css({"position":"static"});
}
if(scroH >= this.h1 && scroH < this.h2){
this.onClearNav();
$("#1").css({"background-color":"red"});
}
if(scroH >= this.h2 && scroH < this.h3){
this.onClearNav();
$("#2").css({"background-color":"red"});
}
if(scroH >= this.h3){
this.onClearNav();
$("#3").css({"background-color":"red"});
}
},
onClearNav : function(){
$("#navId").find("li").each(function(){
$(this).css({"background-color":"#fff"});
});
},
onAncher : function(index){
var top = this.topArr[index];
$('body,html').animate({'scrollTop':top-20},500);
}
};
$(document).ready(function(){
operPage.init();
});
</script>
