滚动切换

 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>