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玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
多重?l件?合查?(一)
2006/10/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
详解javascript高级定时器
2015/12/31 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
js实现星星打分效果
2020/07/05 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Nginx进程调度问题详解
2021/09/25 Servers