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>
