<!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;width:200px; } span{ display:inline-block;width:200px;height:50px;border:1px solid #999;text-align:center;line-height:50px;cursor:pointer; } @media screen and (max-width:1100px){ li{ height:50px;width:100px; } span{ display:inline-block;width: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;width:1100px;" id="all"> <div style="width:100%;height:900px;background:red;" > </div> <div style="width:100%;height:400px;background:yellow;"> </div> <div style="width:100%;height:400px;background:black;"> </div> <div style="width:100%;height:400px;background:green;"> </div> <div style="width:100%;height:400px;background:blue;"> </div> <div style="width:100%;height:400px;background:red;"> </div> </div> <div style="display:none;position:fixed;top:100px;left:200px;width: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>