类似taobao的作法.

2010-08-16 18:37:03 by 【6yang】, 155 visits, 收藏 | 返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
.pages{ position:relative;}
.pages .top{
height:230px;
background-color:#CCC;
}
.pages .bottom{
height:400px;
}
#fitler.sticky{
background-color:#FFFFFF;
padding-top:10px;
position:fixed;
top:-10px;
z-index:99;/*class="sticky"*/
width:100%;
left:0;
}
#fitler .searchWrap{
background:#666 none;
color:#003;
height:40px;

}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
var FixedBox=function(el){
  this.element=el;
  this.BoxY=getXY(this.element).y;
}
FixedBox.prototype={
  setCss:function(){
   var windowST=(document.compatMode && document.compatMode!="CSS1Compat")? document.body.scrollTop:document.documentElement.scrollTop||window.pageYOffset;
   if(windowST>this.BoxY){
    this.element.style.cssText="position:fixed; top:0px; background-color:#cdcdcd";
   }else{
    this.element.style.cssText="";
   }
  }
};
//添加事件
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
   elm.addEventListener(evType, fn, useCapture);
   return true;
  }else if (elm.attachEvent) {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
  }
  else {
   elm['on' + evType] = fn;
  }
}
//获取元素的XY坐标；
function getXY(el) {
        return document.documentElement.getBoundingClientRect && (function() {//取元素坐标，如元素或其上层元素设置position relative
            var pos = el.getBoundingClientRect();
            return { x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop };
        })() || (function() {
            var _x = 0, _y = 0;
            do {
                _x += el.offsetLeft;
                _y += el.offsetTop;
            } while (el = el.offsetParent);
            return { x: _x, y: _y };
        })();
    }
//实例化；
var divA=new FixedBox(document.getElementById("fitler"));
   addEvent(window,"scroll",function(){
  divA.setCss();
});

})

</script>
<body>
<div class="pages">
<div class="top">your head</div>
<div class="center">
  <div id="fitler" >
    当前的是scrollTop为：<input value="" size="4" maxlength="4" id="wpyo">
  </div>
  <div class="content">
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>
   <p>sisis</p>

</div>
</div>
<div class="bottom">your footer</div>
</div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=783&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

类似taobao的作法.

图片原图