search

Home >Web Front-end >JS Tutorial >JS achieves good compatibility and automatically tops the Taobao floating toolbar effect_javascript skills

JS achieves good compatibility and automatically tops the Taobao floating toolbar effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:38:431516browse

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-tb-float-top-tools-menu-codes/

具体代码如下：

<!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&#63;(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&#63;"":"fixed";    
  IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>
</script> 
</html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery regular implementation of unified form validation_jqueryNext article：jquery regular implementation of unified form validation_jquery

Related articles

See more