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

作者:小括号时间:2026-10-30 02:29:54浏览:379

本文介绍一种基于JavaScript实现的淘宝风格悬浮工具栏,具备良好浏览器兼容性并支持自动置顶功能。当页面滚动至顶部时,工具栏可智能判断位置并保持固定,避免遮挡内容。文章提供完整代码示例与在线演示,适用于需要固定导航或快捷操作栏的Web项目。

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

本文详细介绍一种利用JavaScript开发的淘宝风格悬浮工具栏,该方案具有出色的浏览器兼容性,并支持自动置顶功能。

该悬浮工具栏兼容多种浏览器环境,并具备自动置顶特性。当用户将滚动条拖拽至页面最顶端时,工具栏会自动检测当前位置,并始终保持在屏幕顶部,有效防止内容被遮挡。掌握这一逻辑后,可灵活应用于其他场景,具体效果可参考后续演示。

运行效果截图如下:

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?(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程序设计有所帮助。

作者最新文章