JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果


Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果。分享给大家供大家参考。具体如下:

这是一款兼容性好,自动置顶的淘宝悬浮工具栏,如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡,其实明白了这种思路,你就能举一返三了,演示一下看看效果。

运行效果截图如下:

JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

在线演示地址如下:

具体代码如下:

<!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(images/tb2.png) no-repeat -12px -37px;width:744px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0}
#box{position:relative;height:500px;width:744px;background:#ddd url(images/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>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
js jquery数组介绍
Jul 15 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
jQuery表单验证之密码确认
May 22 jQuery
Node.js中sequelize时区的配置方法
Dec 10 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 #Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 #Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 #Javascript
11种ASP连接数据库的方法
Sep 18 #Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 #Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 #Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 #Javascript
You might like
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python中字符串前面加r的作用
2015/06/04 Python
说一说Python logging
2016/04/15 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python如何使用unittest测试接口
2018/04/04 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
学期自我评价
2014/01/27 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
酒会邀请函
2015/01/31 职场文书
保洁员岗位职责
2015/02/04 职场文书
起诉状范本
2015/05/20 职场文书
技术入股合作协议书
2016/03/21 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Pandas搭配lambda组合使用详解
2022/01/22 Python