Discuz导航条智能浮动如此简单
网站中一些中要的元素有时候需要保持在当前屏上，比导航条。但这个又是网页中不在页面最顶部的一部分，所以现在就有很多朋友看中了淘宝的那种导航条智能浮动效果。今天在网上找了到了一个非常简单的js代码来实现这个功能。<style type="text/css">.floatnv{position:fixed;_position:absolute;top:0px;z-index:999;width:957px;}
</style>
<script language="javascript" type="text/javascript">
(function() {
var oDiv = document.getElementById("nv");
var H = 0, iE6;
var Y = oDiv;
while (Y) {
H += Y.offsetTop;
Y = Y.offsetParent;
};
iE6 = window.ActiveXObject && !window.XMLHttpRequest;
if (!iE6) {
window.onscroll = function() {
var s = document.body.scrollTop || document.documentElement.scrollTop;
if (s > H) {
oDiv.className = "floatnv";
if (iE6) {
oDiv.style.top = (s - H) + "px";
}
} else {
oDiv.className = "";
}
}
}
})();
</script> 以上代码在Discuz! X程序的默认模板中测试成功，下面三点需要根所自己网站作适当调整：z-index:999; 这里的是999浮动层的堆叠顺序
width:957px; 这里的957px设置浮动后的导航条宽度，如果原css中已定义了可忽略
var oDiv = document.getElementById("nv");这里的nv就是导航条的id值
页:
[1]