淘宝给我的灵感、自动置顶悬浮
Posted By:帅T_ Date:2013/8/1 19:00:18 最后修改:2013/8/1 19:00:17 Click Rate:338

产品中心 ,产品太多,每页太少的话用户翻着觉得累,每页做多一切呢  。网站做得太长,用户找不到导航了咋办呢!!

今天在网上找到了一段代码  ,淘宝给我的灵感。仿淘宝的自动悬浮置顶 ,你逛淘宝就发现你浏览宝贝大图模式  往下啦啦啦啦。那个销量排序框会自动悬浮置顶。这是怎么实现的呢!哈哈 啊哈啊哈啊哈   貌似要用到js。貌似不需要用js。  ,代码不是我写的 我只是分享出来而已~ 我觉得很好  的样子。还挺兼容的

网站是http://www.codefans.net/jscss/code/2150.shtml


代码是

<!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>兼容IE6的淘宝悬浮工具栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:0;padding:0;font-size:12px;font-family:Arial;font:12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif;background:url() fixed}
#float{background:url(/jscss/demoimg/201010/tb2.png) no-repeat -12px -37px;width:74***x;height:3***x;border:1px solid #C0DBF8;position:absolute;top:0}
#box{position:relative;height:500px;width:74***x;background:#ddd url(/jscss/demoimg/201010/506384_1270823833Kkk2.jpg) no-repeat;}
</style>
</head>
<body>
<div style="height:300px;background:#eee"></div>
<div id="box"><div id="float" ></div></div>
<div style="height:1000px;background:#eee"></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>

标签: 悬浮
摘要:HTML代码


收录查询 Copyright ? 2024  广西佳馨科技   地址:广西佳馨科技  电话:13878876479   QQ:120947546  电子邮件:1447876499@qq.com   站点提供API   桂ICP备14003626号-1
关闭 X