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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
上海中网科技笔试题
2012/02/19 面试题
销售队伍口号
2014/06/11 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
同意转租证明
2015/06/24 职场文书
初中班主任心得体会
2016/01/07 职场文书
靠谱的活动总结
2019/04/16 职场文书