仿淘宝工具条

很久前写了个脚本给同事，为了实现导航条不随滚动条一直滚下去而悬浮于窗口的效果。今天同事来找我说有bug，我一看，的确写的有点问题。

这里废话不说，先贴最新代码：

主要js：

$(document).ready(function(){    
    var orig_height = $("#head").offset().top;
    var replaceHeight = $("#head").height();
    
    //创建替补容器撑高度
    var replaceDiv = $("<div id='replace'></div>");
    replaceDiv.insertBefore($("#head"));

    //定义移动方向默认向下
    var down = true;
    $(window).scroll(function () {
        var _height = $("#head").offset().top;//document.getElementById("aaa").scrollHeight ;
        var _scrollHeight = $(document).scrollTop();
        $("#head").html(_height+","+_scrollHeight+",isDown:"+down+",orig_height:"+orig_height);
        
        if (down && _height - _scrollHeight <= 0) {
            down = false;
            $("#head").addClass("head_float");
            $("#replace").css("height", replaceHeight);
        } else if (!down && _scrollHeight <= orig_height) {
            if ($("#head").hasClass("head_float")) {
                $("#head").removeClass("head_float");
                $("#replace").css("height", 0);
            }
            down = true;
        }        
    });
});

html完整例子：

查看代码 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>拉拉</title>
  5 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  6 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7 <style>
  8 .top{width:200px;height:15px;}
  9 .banner{width:200px;height:120px;background:#efefef;}
 10 .test{width:200px;height:100px;}
 11 .head_float{
 12 position: fixed !important;
 13 top:0px;
 14 z-index:99999;
 15 }
 16 </style>
 17 <script type="text/javascript" src="jquery.min.js"></script>
 18 <script language="javascript">
 19 $(document).ready(function(){    
 20     var orig_height = $("#head").offset().top;
 21     var replaceHeight = $("#head").height();
 22     
 23     //创建替补容器撑高度
 24     var replaceDiv = $("<div id='replace'></div>");
 25     replaceDiv.insertBefore($("#head"));
 26 
 27     //定义移动方向默认向下
 28     var down = true;
 29     $(window).scroll(function () {
 30         var _height = $("#head").offset().top;//document.getElementById("aaa").scrollHeight ;
 31         var _scrollHeight = $(document).scrollTop();
 32         $("#head").html(_height+","+_scrollHeight+",isDown:"+down+",orig_height:"+orig_height);
 33         
 34         if (down && _height - _scrollHeight <= 0) {
 35             down = false;
 36             $("#head").addClass("head_float");
 37             $("#replace").css("height", replaceHeight);
 38         } else if (!down && _scrollHeight <= orig_height) {
 39             if ($("#head").hasClass("head_float")) {
 40                 $("#head").removeClass("head_float");
 41                 $("#replace").css("height", 0);
 42             }
 43             down = true;
 44         }        
 45     });
 46 });
 47 </script>
 48 </head>
 49 
 50 <body>
 51 <div class="top"></div>
 52 <div class="banner"></div>
 53 <div class="test"></div>
 54 <!--div id="replace" class="replace"></div-->
 55 <div id="head" style="width:100%;height:35px;background:#ccc"></div>
 56 <p>
 57 get A scroll</p>
 58 <p>
 59 get A scroll</p>
 60 <p>
 61 get A scroll</p>
 62 
 63 <p>
 64 get A scroll</p>
 65 
 66 
 67 <p>
 68 get A scroll</p>
 69 
 70 
 71 <p>
 72 get A scroll</p><p>
 73 get A scroll</p>
 74 
 75 get A scroll</p>
 76 <p>
 77 get A scroll</p>
 78 
 79 <p>
 80 get A scroll</p>
 81 
 82 
 83 <p>
 84 get A scroll</p>
 85 
 86 
 87 <p>
 88 get A scroll</p><p>
 89 get A scroll</p>
 90 
 91 
 92 get A scroll</p>
 93 <p>
 94 get A scroll</p>
 95 
 96 <p>
 97 get A scroll</p>
 98 
 99 
100 
101 <p>
102 get A scroll</p>
103 
104 
105 <p>
106 get A scroll</p><p>
107 get A scroll</p>
108 
109 
110 get A scroll</p>
111 <p>
112 get A scroll</p>
113 
114 <p>
115 get A scroll</p>
116 
117 
118 </body>
119 </html>

 

 

posted @ 2012-08-21 18:11  decodeArt  阅读(278)  评论(0)  编辑  收藏  举报