Discuz导航条智能浮动如此简单

大师兄

网站中一些中要的元素有时候需要保持在当前屏上，比导航条。但这个又是网页中不在页面最顶部的一部分，所以现在就有很多朋友看中了淘宝的那种导航条智能浮动效果。

今天在网上找了到了一个非常简单的js代码来实现这个功能。

1. <style type="text/css">
   
2. .floatnv{position:fixed;_position:absolute;top:0px;z-index:999;width:957px;}
   
3. </style>
   
4. <script language="javascript" type="text/javascript">
   
5. (function() {
   
6.     var oDiv = document.getElementById("nv");
   
7.     var H = 0, iE6;
   
8.     var Y = oDiv;
   
9.     while (Y) {
   
10.         H += Y.offsetTop;
    
11.         Y = Y.offsetParent;
    
12.     };
    
13.     iE6 = window.ActiveXObject && !window.XMLHttpRequest;
    
14.     if (!iE6) {
    
15.         window.onscroll = function() {
    
16.             var s = document.body.scrollTop || document.documentElement.scrollTop;
    
17.             if (s > H) {
    
18.                 oDiv.className = "floatnv";
    
19.                 if (iE6) {
    
20.                     oDiv.style.top = (s - H) + "px";
    
21.                 }
    
22.             } else {
    
23.                 oDiv.className = "";
    
24.             }
    
25.         }
    
26.     }
    
27. })();
    
28. </script>

复制代码

以上代码在discuz! X程序的默认模板中测试成功，下面三点需要根所自己网站作适当调整：

z-index:999;    这里的是999浮动层的堆叠顺序
width:957px;   这里的957px设置浮动后的导航条宽度，如果原css中已定义了可忽略
var oDiv = document.getElementById("nv");  这里的nv就是导航条的id值

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！