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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
js实现自定义右键菜单
May 18 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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
967 个函式
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python正则表达式常用函数总结
2017/06/24 Python
python实现简易通讯录修改版
2018/03/13 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python创建数字列表的示例
2019/11/28 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
会议邀请函范文
2014/01/09 职场文书
2015新学期开学寄语
2015/02/26 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL