<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8;"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
*{margin:0;padding:0;}
li{
height:50px;200px;
}
span{
display:inline-block;200px;height:50px;border:1px solid #999;text-align:center;line-height:50px;cursor:pointer;
}
@media screen and (max-1100px){
li{
height:50px;100px;
}
span{
display:inline-block;100px;height:50px;border:1px solid #999;text-align:center;line-height:50px;cursor:pointer;
}
}
</style>
</head>
<body>
<div style="margin:0 auto;padding:0;1100px;" id="all">
<div style="100%;height:900px;background:red;" >
</div>
<div style="100%;height:400px;background:yellow;">
</div>
<div style="100%;height:400px;background:black;">
</div>
<div style="100%;height:400px;background:green;">
</div>
<div style="100%;height:400px;background:blue;">
</div>
<div style="100%;height:400px;background:red;">
</div>
</div>
<div style="display:none;position:fixed;top:100px;left:200px;200px;" id="xx">
<ul style="list-style-type:none;margin:0;padding:0;">
<li ><span >选择黄色</span></li>
<li ><span >选择灰色</span></li>
<li ><span >选择绿色</span></li>
<li ><span >选择蓝色</span></li>
</ul>
</div>
</body>
<script src="jquery.js" ></script>
<script>
$(function(){
tag = true;
var arr = [ "yellow", "#999", "green", "blue" ];
var $xx = $("#xx");
var $span = $("ul li ");
var heightVal = $(document).height()-400;
$(window).scroll(function(){
if(tag){
var topVal = $(window).scrollTop();
if(topVal>500){
var a = count(topVal,heightVal);
$span.eq(a).find("span").css("background",arr[a]);
$span.eq(a).siblings("li").find("span").css("background","");
$xx.css("display","block");
}else{
$xx.css("display","none");
}
}
});
function count(c,d){
var e = parseInt((d-c)/400);
return 4-e;
}
$span.each(function(){
$(this).on("click",function(){
tag = false;
var index = $(this).index();
$span.eq(index).find("span").css("background",arr[index]);
$span.eq(index).siblings("li").find("span").css("background","");
$("html,body").animate({scrollTop:$("#all div").eq(index+1).offset().top}, "fast","",function(){
tag = true;
});
});
});
});
</script>
</html>