1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>滚动切换</title> 5 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 6 <style type="text/css"> 7 body, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, dd, menu, ol, ul, caption, th, td, form, fieldset, legend, input, button, textarea { margin: 0; padding: 0; } 8 h1,h2, h3, h4, h5, h6 {font-size:100%; } 9 menu, ol, ul { list-style: none; } 10 table { border-collapse: collapse; border-spacing: 0; } 11 fieldset, img { border: 0; } 12 address, cite, dfn, em, var { font-style: normal; } 13 code, kbd, pre, samp { font-family: 'courier new',courier,monospace; } 14 input, button, textarea, select { font-size: 100%; } 15 abbr[title] { border-bottom: 1px dotted; cursor: help; } 16 a { outline: none; text-decoration: none; } 17 body, input, button, textarea, select, option, optgroup { font: 12px/1 arial, \5b8b\4f53, sans-serif; } 18 .cfl{ *zoom: 1; } 19 .cfl:after{content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden;} 20 .hidden{display:none;} 21 22 #nav{width:980px; margin: 0px auto; overflow:hidden; position: fixed;background:#fff;height:60px;} 23 #nav li{width:100px; text-align: center; float:left; } 24 #nav .on{background: #f00;} 25 </style> 26 <script type="text/javascript"> 27 (function ($) { 28 $.fn.scrollDiv = function (options) { 29 options = jQuery.extend({ 30 conts: {}, 31 main: {}, 32 step: 50, 33 navHeight: 50, 34 timing: 800 35 }, options); 36 37 var _this = $(this); 38 var arr = new Array(); 39 var bigArr = new Array(); 40 var iii = 0; 41 var tmp = 0; 42 43 $.each(options.conts, function (k, v) { 44 arr[k] = $(v).height(); 45 tmp += $(v).height(); 46 bigArr[k] = parseInt(tmp - 50); 47 console.log(arr[k] + " " + bigArr[k] + " "); 48 }); 49 50 $(window).scroll(function () { 51 var scroll = $(this).scrollTop(); 52 for (var i in bigArr) { 53 if (bigArr[i] > scroll) { 54 iii = i; 55 break; 56 } 57 } 58 _this.find("li").attr("class", "").eq(iii).attr("class", "on"); 59 }); 60 61 var navLis = _this.find("li"); 62 navLis.click(function () { 63 var tmpi = parseInt($(this).index()); 64 $('html,body').animate({ scrollTop: (options.main.find(".bigcont").eq(tmpi).offset().top - options.navHeight) + "px" }, options.timing); 65 return false; 66 }); 67 } 68 })(jQuery); 69 </script> 70 <script type="text/javascript"> 71 $(function () { 72 $("#nav").scrollDiv({ "conts": $("#main .bigcont"), "main": $("#main") }); 73 }); 74 </script> 75 </head> 76 <body> 77 <ul id="nav" class="cfl"> 78 <li class="on">a </li> 79 <li>b </li> 80 <li>c </li> 81 <li>d </li> 82 <li>e </li> 83 </ul> 84 <div id="main"> 85 <div class="bigcont" style="height: 600px; background: #ff0"> 86 </div> 87 <div class="bigcont" style="height: 600px; background: #f0f"> 88 </div> 89 <div class="bigcont" style="height: 800px; background: #0ff"> 90 </div> 91 <div class="bigcont" style="height: 1000px; background: #f00"> 92 </div> 93 <div class="bigcont" style="height: 600px; background: #f60"> 94 </div> 95 </div> 96 </body> 97 </html>