代码改变世界

侧边栏和顶部滚动位置固定

2012-07-17 19:06  江苏黑马  阅读(3041)  评论(0)    收藏  举报
  1. 侧边栏：

    图解：







    原理：当视窗Y滚动值大于侧边栏视窗Y偏移值时，设置侧边栏上偏移为前者与后者的差值。反之，设置侧边栏上偏移为初始值，此处为0。

    代码：
    var $sideBar = $("#sideBar"), $window = $(window), oTop = $sideBar.offset().top, barStyle = $sideBar[0].style, sTop;
                $window.scroll(function() {
                    sTop = $window.scrollTop();
                    sTop > oTop ? barStyle.top = sTop - oTop + "px" : barStyle.top = 0;
                })
  2. 顶部：
    图解：




    原理：利用顶部和底部上偏移值与视窗滚动值加减。

    代码：
     1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     *{margin:0;padding:0}
 8     body{position:relative}
 9         .header,.mainer{width:800px}
10         .header{height:200px;background-color:#ccc;position:absolute}
11         .mainer{background-color:#ff0;position:absolute;top:200px;z-index:-999}
12             .mainer p{margin:200px 0}
13 </style>
14 </head>
15 
16 <body>
17 <div class="header"></div>
18 <div class="mainer">
19     <p>111111111111111111111111111111111111</p>
20     <p>222222222222222222222222222222222222</p>
21     <p>333333333333333333333333333333333333</p>
22     <p>444444444444444444444444444444444444</p>
23     <p>555555555555555555555555555555555555</p>
24     <p>666666666666666666666666666666666666</p>
25 </div>
26 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
27 <script>
28     $(function(){
29         var $mainer=$(".mainer"),$header=$(".header"),sTop,mStyle=$mainer[0].style,hStyle=$header[0].style,$window=$(window),mTop=$mainer.offset().top;    
30         $window.scroll(function(){
31             sTop=$window.scrollTop();
32             mStyle.top=mTop-sTop+"px";
33             hStyle.top=sTop+"px";
34         });
35     });
36 </script>
37 </body>
38 </html>