fixed仿淘宝工具栏效果（两种）

m2maomao

浏览: 224799 次
性别:
来自: 重庆

最近访客更多访客>>

zltwork

gdk2

hobby828

yan_xg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html/Css

看到有人正在找这个效果，而我正好也在研究，所以发上来，共享一下！

现在我们来分析下这个“fixed仿淘宝工具栏效果”效果具体要实现哪些功能:

1、原本我一直认为，只有在滚动一屏的时候，工具栏才会固定在浏览器顶端。可是当我仔细研究这个效果的时候，我才发现不是我认识的那样。其实是当浏览器滚动条的高度>工具栏在目前页面的位置时，工具栏才会固定在页面的顶部。

2、综上所述呢，我们首先要获取工具栏在页面xy的坐标，本次效果工具栏一致放在页面左边，所以不在获取x坐标。

3、监听页面滚动条，当滚动条的高度>工具栏在页面的y值。在此处我用了添加触发事件（scroll）来处理，但是此处给我带来了麻烦，下面再说！

4、大于y值了，就变幻最外层div的class名称，并且右下角的关闭按钮出现

5、关闭按钮后工具栏就不可以在固定在浏览器的顶端，也就是不可以在触发scroll事件，必须清除scroll事件。添加某一事件后在清除这个事件，必须保持是处理的同一方法！

6、后面的下拉框，价格的搜索都比较好做，可能在技巧上要处理下移上移出。

再来一个效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>  </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body,html{margin:0;padding:0;background:url(/100100759.png) fixed}
#float{background:url(http://www.css88.com/wp-content/uploads/2009/10/tb2.png) no-repeat -12px -37px;width:744px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0}
#box{position:relative;width:744px;margin:0px auto;}
</style> 
</head> 
<body>

<div style="height:100px;background:#fff"></div> 
<div id="box"><div id="float" ></div></div> 
<div style="height:1000px;background:#000"></div> 
</body> 
<script type="text/javascript">
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed";        
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>
</script> 
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>fixed仿淘宝工具栏效果</title>
<meta name="author" content="走起来" />
<meta name="copyright" content="www.css3train.com,www.html5sum.com" />
<!-- style begin -->
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body {background:#fff;font: 12px/1.5 tahoma,arial,宋体b8b\4f53;}
a{text-decoration:none;color:#36C;}
a:hover {color:red;text-decoration: none;}
.filter-tools-box {background-color: white;z-index: 90;width:750px;margin:0 auto;}
.filter-follow{position:fixed;width:750px;top:0;left:50%;margin-left:-375px;}
.filter-tools {height: 20px;padding: 7px 8px;color: #404040;background:#ddd;border: 1px solid #CCC;border-top: none;position: relative;z-index: 105;
}
.filter-tools li {display: inline;float: left;}
.filter-tools .thumb-mode a {background:url('http://www.css3train.com/images/ico.png') no-repeat -79px -3px;}
.filter-tools .mode a {display: block;width: 64px;height: 18px;overflow: hidden;padding: 0 0 0 20px;text-decoration: none;border: 1px solid #CCC;}
.filter-tools .thumb-mode a:hover {background:url('http://www.css3train.com/images/ico.png') no-repeat -79px -20px;}
.filter-tools .mode a:hover {color: #404040;border: 1px solid #308ED1;}
.filter-tools .order {position: relative;z-index: 1;margin-left: 20px;}
.filter-tools .order .label {height: 20px;margin-right: 4px;line-height: 20px;line-height: 22px 9;_line-height: 18px;}
.filter-tools .order .label, .filter-tools .order .select-item {display: inline;float: left;color: #404040;}
.filter-tools .order .select-item {width: 94px;}
.filter-tools .order .item-list {left: 28px;width: 120px;}
.item-list {display: none;position: absolute;top: 19px;left: 0;overflow: hidden;background: white;border: 1px solid #A6A6A6;}
.filter-tools .order .item-list li {width: 100%;height: 22px;overflow: hidden;padding: 0;line-height: 22px;line-height: 24px  9;_line-height: 22px;border-bottom: 1px solid #D9E9FB;}
.filter-tools .order .by-price-asc a{background:url('http://www.css3train.com/images/ico.png') no-repeat -72px -38px;}
.filter-tools .order .by-price-desc a{background:url('http://www.css3train.com/images/ico.png') no-repeat -72px -59px;}
.filter-tools .order .by-credit-desc a{background:url('http://www.css3train.com/images/ico.png') no-repeat -72px -78px;}
.filter-tools .order .by-sale-desc a{background:url('http://www.css3train.com/images/ico.png') no-repeat -72px -97px;}
.filter-tools .order .item-list .selected a {cursor: default;background-color: #EEE;}
.filter-tools .order .item-list a:hover {background-color: #EEE;}
.filter-tools .order .item-list a {display: block;width: 92px;margin: 1px 0;padding-left: 28px;text-decoration: none;color: black;}
.filter-tools .way {margin-left: 20px;}
.filter-tools .way .by-credit, .filter-tools .way .by-sale {background:url('http://www.css3train.com/images/ico.png') no-repeat -30px -13px;}
.filter-tools .way .by-credit:hover, .filter-tools .way .by-sale:hover{background:url('http://www.css3train.com/images/ico.png') no-repeat -30px -49px;}
.filter-tools .way a {display: inline;float: left;width: 42px;height: 18px;overflow: hidden;margin-right: -1px;padding: 0;text-indent: 5px;line-height: 18px;line-height: 20px  9;_line-height: 16px;border: 1px solid #CCC;}
.filter-tools .way .by-price {background:url('http://www.css3train.com/images/ico.png') no-repeat -30px 4px;}
.filter-tools .way .by-price:hover{background:url('http://www.css3train.com/images/ico.png') no-repeat -30px -32px;}
.filter-tools .way a:hover, .filter-tools .by-credit-desc .by-credit, .filter-tools .by-price-asc .by-price, .filter-tools .by-price-desc .by-price, .filter-tools .by-sale-desc .by-sale{position: relative;color: #404040;border: 1px solid #308ED1;}
.filter-tools .region {position: relative;width: 84px;height: 20px;margin-left: 5px;z-index: 99999;}
.filter-tools .region form {position: absolute;top: 0;left: 0;width: 84px;height: 20px;overflow: hidden;padding: 0 2px;}
.filter-tools input {width: 30px;height: 15px;margin: 0 2px;font-size: 11px;font-family: Arial;border: 1px solid #B5B5B5;}
.filter-tools .region .submit {width: 42px;height: 20px;overflow: hidden;margin: 2px 0 0 41px;white-space: nowrap;cursor: pointer;background:url('http://www.css3train.com/images/ico.png') no-repeat left -130px;border:1px solid #ccc;}
.filter-tools .region .expand{height:44px;background:#fff;border:1px solid #feaf17;}
.filter-tools .seat {position: relative;margin-left: 24px;z-index: 10000;}
.filter-tools .seat .select-item {width: 44px;}
.filter-tools .select-item {display: inline;float: left;height: 18px;overflow: hidden;padding: 0 21px 0 5px;line-height: 18px;line-height: 20px 9;_line-height: 16px;white-space: nowrap;cursor: pointer;background:url('http://www.css3train.com/images/ico.png') no-repeat right -130px;border: 1px solid #A6A6A6;}
.filter-tools .seat .item-list {width: 200px;}
.filter-tools .seat form {position: absolute;top: 106px;left: 8px;width: 160px;overflow: hidden;}
.filter-tools .seat button {border: none;width: 42px;height: 20px;overflow: hidden;margin-left: 5px;text-indent: -100px;cursor: pointer;background:url('http://www.css3train.com/images/ico.png') no-repeat 0 -157px;}
.filter-tools .seat .text {width: 90px;height: 14px;padding: 2px;line-height: 14px;color: gray;border: 1px solid #949494;}
.filter-tools .seat .text, .filter-tools .seat button {display: inline;float: left;}
.filter-tools .seat .all {padding-top: 10px;border-top: none;}
.filter-tools .seat p {width: 190px;overflow: hidden;padding: 5px;border-top: 1px dotted gray;}
.filter-tools .seat p .selected, .filter-tools .seat p .selected:hover {color: white;background: #F50;}
.filter-tools .seat p a {display: inline;float: left;padding: 2px;white-space: nowrap;}
.filter-tools .seat .area a {margin-right: 8px;}
.filter-tools .seat .city {padding-top: 34px;}
.filter-tools .seat .city a {width: 30px;margin-left: 2px;}
.filter-tools .seat .province a {margin-right: 6px;}
.filter-follow div.filter-close-btn {display: block;}
.filter-tools div.filter-close-btn {bottom: -5px;cursor: pointer;height: 11px;line-height: 10px;overflow: hidden;position: absolute;right: -5px;width: 28px;display: none;}
.back{position:absolute;right:20px;top:10px;color:#000;text-shadow:1px 1px 3px #999999;text-decoration:none;z-index:99999;}
</style>
<!-- style end -->
<script type="text/javascript" src="http://www.css3train.com/js/zhjcom.js"></script>
</head>
<body style="height:2000px;">
<!-- html begin -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="filter-tools-box" id="topfixed">
  <ul class="filter-tools">
    <li class="mode thumb-mode">
      <a title="列表展示" href="javascript:void(0);" class="select-item">切换到列表</a>
    </li>
    <li id="J_FilterOrder" class="order ">
      <span class="label">排序</span>
      <span class="select-item j_dd_trigger">默认排序</span>
      <ul class="item-list j_dd_panel">
        <li class="by-price-asc ">
          <a href="javascript:void(0);">价格从低到高</a>
        </li>
        <li class="by-price-desc ">
          <a href="javascript:void(0);">价格从高到低</a>
        </li>
        <li class="by-credit-desc ">
          <a href="javascript:void(0);">信用从高到低</a>
        </li>
        <li class="by-sale-desc ">
          <a href="javascript:void(0);">成交量从高到低</a>
        </li>
        <li class="by-default selected">
          <a href="javascript:void(0);">默认排序</a>
        </li>
      </ul>
    </li>
    <li class="way ">
      <a href="javascript:void(0);" class="by-credit">信用</a>
      <a href="javascript:void(0);" class="by-price">价格</a>
    </li>
    <li class="region">
      <form action="javascript:void(0);" method="get" name="filterPriceForm" id="J_FilterPrice">
        <input type="text" name="filterPriceFrom" class="j_value">
        <span>-</span>
        <input type="text" name="filterPriceTo" class="j_value">
        <button type="submit" class="submit">确定</button>
      </form>
    </li>
    <li id="J_Seat" class="seat">
      <span class="select-item j_dd_trigger">所在地</span>
      <div class="item-list j_dd_panel">
        <form method="get" action="javascript:void(0);">
          <input type="hidden" name="cat" id="cat" value="1623">
          <input type="hidden" name="sort" id="sort" value="commend">
          <input type="hidden" name="isprepay" id="isprepay" value="1">
          <input type="hidden" name="user_type" id="user_type" value="0">
          <input type="hidden" name="viewIndex" id="viewIndex" value="1">
          <input type="hidden" name="as" id="as" value="0">
          <input type="hidden" name="yp4p_page" id="yp4p_page" value="0">
          <input type="hidden" name="commend" id="commend" value="all">
          <input type="hidden" name="atype" id="atype" value="b">
          <input type="hidden" name="style" id="style" value="grid">
          <input type="hidden" name="s" id="s" value="0">
          <input type="hidden" name="path" id="path" value="16-1623">
          <input type="hidden" name="rr" id="rr" value="1">
          <input type="hidden" name="olu" id="olu" value="yes">
          <input type="hidden" name="isnew" id="isnew" value="2">
          <input type="hidden" name="smc" id="smc" value="1">
          <input type="hidden" name="spm" value="a2106.m874.1000206.d10002">
          <input type="text" name="loc" autocomplete="off" class="text j_value">
          <button type="submit">确定</button>
        </form>
        <div class="para">
          <p class="all"><a href="#" data-value="" class="selected">所有地区</a></p>
          <p class="area">
            <a href="#" data-value="江苏,浙江,上海">江浙沪</a>
            <a href="#" data-value="广州,深圳,中山,珠海,佛山,东莞,惠州">珠三角</a>
            <a href="#" data-value="香港,澳门,台湾">港澳台</a>
            <a href="#" data-value="北京,天津">京津</a>
            <a href="#" data-value="北京">北京</a>
            <a href="#" data-value="上海">上海</a>
            <a href="#" data-value="广州">广州</a>
            <a href="#" data-value="深圳">深圳</a>
            <a href="#" data-value="美国,英国,法国,瑞士,澳洲,新西兰,加拿大,奥地利,韩国,日本,德国,意大利,西班牙,俄罗斯,泰国,印度,荷兰,新加坡,其它国家">海外</a>
          </p>
          <p class="city">
            <a href="#" data-value="杭州">杭州</a>
            <a href="#" data-value="温州">温州</a>
            <a href="#" data-value="宁波">宁波</a>
            <a href="#" data-value="南京">南京</a>
            <a href="#" data-value="苏州">苏州</a>
            <a href="#" data-value="济南">济南</a>
            <a href="#" data-value="青岛">青岛</a>
            <a href="#" data-value="大连">大连</a>
            <a href="#" data-value="无锡">无锡</a>
            <a href="#" data-value="合肥">合肥</a>
            <a href="#" data-value="天津">天津</a>
            <a href="#" data-value="长沙">长沙</a>
            <a href="#" data-value="武汉">武汉</a>
            <a href="#" data-value=" 郑州"> 郑州</a>
            <a href="#" data-value="石家庄">石家庄</a>
            <a href="#" data-value="成都">成都</a>
            <a href="#" data-value="重庆">重庆</a>
            <a href="#" data-value="西安">西安</a>
            <a href="#" data-value="昆明">昆明</a>
            <a href="#" data-value="南宁">南宁</a>
            <a href="#" data-value="福州">福州</a>
            <a href="#" data-value="厦门">厦门</a>
            <a href="#" data-value="南昌">南昌</a>
            <a href="#" data-value="东莞">东莞</a>
            <a href="#" data-value="沈阳">沈阳</a>
            <a href="#" data-value="长春">长春</a>
            <a href="#" data-value="哈尔滨">哈尔滨</a>
          </p>
          <p class="province">
            <a href="#" data-value="安徽">安徽</a>
            <a href="#" data-value="福建">福建</a>
            <a href="#" data-value="甘肃">甘肃</a>
            <a href="#" data-value="广东">广东</a>
            <a href="#" data-value="广西">广西</a>
            <a href="#" data-value="贵州">贵州</a>
            <a href="#" data-value="海南">海南</a>
            <a href="#" data-value="河北">河北</a>
            <a href="#" data-value="河南">河南</a>
            <a href="#" data-value="湖北">湖北</a>
            <a href="#" data-value="湖南">湖南</a>
            <a href="#" data-value="江苏 ">江苏 </a>
            <a href="#" data-value="黑龙江">黑龙江</a>
            <a href="#" data-value="江西">江西</a>
            <a href="#" data-value="吉林">吉林</a>
            <a href="#" data-value="辽宁">辽宁</a>
            <a href="#" data-value="内蒙古">内蒙古</a>
            <a href="#" data-value="宁夏">宁夏</a>
            <a href="#" data-value="青海">青海</a>
            <a href="#" data-value="山东">山东</a>
            <a href="#" data-value="山西">山西</a>
            <a href="#" data-value="陕西">陕西</a>
            <a href="#" data-value="四川">四川</a>
            <a href="#" data-value="西藏">西藏</a>
            <a href="#" data-value="新疆">新疆</a>
            <a href="#" data-value="云南">云南</a>
            <a href="#" data-value="浙江">浙江</a>
            <a href="#" data-value="香港">香港</a>
            <a href="#" data-value="澳门">澳门</a>
            <a href="#" data-value="台湾">台湾</a>
          </p>
        </div>
      </div>
    </li>
    <li class="way ">
      <a class="by-sale" href="javascript:void(0);">成交</a>
    </li>
    <li>
      <div class="filter-close-btn hidden" id="close_taobao">close</div>
    </li>
  </ul>
</div>
<input type="hidden" value="false" id="isShowSelectBox">
<!-- html end -->
<script type="text/javascript">
(function(){
  var BoxY=0;//工具栏在当前的位置
  var windowST=0;//获取滚动条
  var filter_close_btn = '';//关闭按钮
  ZHJ.FixedBox=function(id){
    BoxY=ZHJ.getXY(id).y;
  };
  /* 滚动条 */
  ZHJ.taobaoTop = function(id){
    filter_close_btn=ZHJ.getByClass(id,'filter-close-btn hidden')[0];
    windowST=(document.compatMode && document.compatMode!="CSS1Compat")? document.body.scrollTop:document.documentElement.scrollTop||window.pageYOffset;
    if(windowST>BoxY){
      id.className='filter-tools-box filter-follow';
      ZHJ.cssStyle(filter_close_btn,'display','block');
    }else{
      ZHJ.closeTaobao(id);
    }
  };
  /* 关闭工具栏 */
  ZHJ.closeTaobao = function(id){
    id.className='filter-tools-box';
    ZHJ.cssStyle(filter_close_btn,'display','none');
  };
  /* 为了添加和删除事件，所以要统一方法 */
  ZHJ.taobaoTopZ = function(){
    ZHJ.classes.doWhileExists('topfixed',ZHJ.taobaoTop);
  };
  /* 下拉框 */
  ZHJ.selectItem = function(id){
    var selectItem = ZHJ.getByClass(id,'select-item j_dd_trigger');//获取下拉框
    var listItem = ZHJ.getByClass(id,'item-list j_dd_panel');//获取下拉框
    for(var i=0;i<selectItem.length;i++){
      (function(i){
        ZHJ.util.addEvent(selectItem[i],'mouseover',function(){ZHJ.selectItemHidden(listItem[i],'display','block')});
        ZHJ.util.addEvent(selectItem[i],'mouseout',function(){ZHJ.selectItemHidden(listItem[i],'display','none')});
        ZHJ.util.addEvent(listItem[i],'mouseover',function(){ZHJ.selectItemHidden(listItem[i],'display','block')});
        ZHJ.util.addEvent(listItem[i],'mouseout',function(){ZHJ.selectItemHidden(listItem[i],'display','none')});
      })(i);
    }
  };
  /* 价格区间搜索 */
  ZHJ.jValue = function(id){
    var jValue = ZHJ.getByClass(id,'j_value');//获取价格
    for(var i=0;i<jValue.length;i++){
      (function(i){
        ZHJ.util.addEvent(jValue[i],'click',function(){
          jValue[i].parentNode.className='expand';
        });
      })(i);
    }
  };
  ZHJ.selectItemHidden = function(obj,attr,value){
    ZHJ.cssStyle(obj,attr,value);
  };
  ZHJ.classes.doWhileExists('topfixed',ZHJ.FixedBox);//获取工具栏在页面的位置，并且判断id存不存在
  ZHJ.util.addEvent(window,'scroll',ZHJ.taobaoTopZ);//添加事件，获取滚动条的高度
  ZHJ.util.addEvent(window,'click',function(){//关闭按钮，删除事件
    ZHJ.classes.doWhileExists('topfixed',ZHJ.closeTaobao);
    ZHJ.util.delEvent(window,'scroll',ZHJ.taobaoTopZ);//删除事件
  });
  ZHJ.classes.doWhileExists('topfixed',ZHJ.selectItem);//下拉框
  ZHJ.classes.doWhileExists('topfixed',ZHJ.jValue);//价格搜索区间
})();
</script>
</body>
</html>

分享到：

自己写的美女瀑布流分享一下 | 做交互应该知道的视觉几件事

2012-08-01 15:59
浏览 1684
评论(1)
分类:Web前端
查看更多

1 楼 husw 2012-12-22

不错，感谢分享！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论