导航条智能浮动如此简单

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

今天在网上找了到了一个非常简单的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! X2.5程序的默认模板中测试成功，下面三点需要根所自己网站作适当调整：

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

复制代码

雨哲嵌入点用户可参考现有配置：http://www.yuzhe.name/Item.asp?id=264

很实用的 大家可以试试看看怎么样支持下这个不错这个不错哦，谢谢 这是什么东东，参观一下

怎么操作

ioss00 发表于 2012-11-12 15:49
怎么操作

因为没有做成插件的形式，所以一般的朋友只有知道在模板中添加代码。
如果使用了超强嵌入点插件的朋友可以直接在后台配置中添加即可。

做成插件也好啊！应该很多人需要的

ioss00 发表于 2012-11-13 13:21
做成插件也好啊！应该很多人需要的

你看回帖情况你知道用需要的人多不多了哈，这样的情况我也没心情去做插件免费发布！！！

{:soso_e127:}

可以做来试试啊！我看很多人搜索这个东西 只是没有而已

ioss00 发表于 2012-11-14 15:38
可以做来试试啊！我看很多人搜索这个东西 只是没有而已

嗯，好的，我抽时间弄个试试哈。

{:soso__16264556057146868546_4:}