25
2013-09

如何用最简单的代码实现discuz X3的固定导航

看到discuz x3的导航在滚动到顶部的时候会固定在顶部,呈透明状态,觉得蛮好的,研究了一下,觉得他们的代码太复杂了,而且只适合他们自己的程序,所以就自己写了一个简单的js,希望可以帮到需要用的人哦,直接上代码了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>中华男模网-型男侃天下-男模联盟-男模杂志-网络茶馆</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
    
 <BODY>
 <style>
    #top{width:100%; height:40px; border:1px solid #ccc;}
    #nv{width:100%; height:40px; border:1px solid blue; float:left; background:lightblue;}
    #nv li{width:100px; height:30px; float:left;}
    #text{width:100%; display:block;}
 </style>
 <script src="jquery.js"></script>
 <script>
window.onscroll=function () {
    var nv=document.getElementById("nv");
    y=nv.style.top = document.body.scrollTop;
    if(y>50) 
    {
        nv.style.position="fixed";
        nv.style.top="0px";
        nv.style.height="40px";
        nv.style.border="1px solid #ccc";
        nv.style.float="left";
        nv.style.clear="both";
        nv.style.opacity="0.8";
    }
    else{
        nv.style.position="";
    }
}
 </script>
  <div id="top">
中华男模网-型男侃天下-男模联盟-男模杂志-网络茶馆
  </div>
<div id="nv">
<ul><li><a href="http://www.nanmo1.com">中华男模网</a></li><li><a href="http://www.iqiyi.com/a_19rqz6dcdw.html">型男侃天下</a></li><li><a href="http://bbs.nanmo1.com">男模联盟</a></li><li><a href="http://www.nanmo1.com/zazhi/">男模杂志</a></li><li><a href="http://www.shiyayong.cn">网络茶馆</a></li></ul>
</div>
    
  <div id="text">
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
    <p>中华男模网</p>
    <p>型男侃天下</p>
    <p>男模杂志</p>
    <p>网络茶馆</p>
  </div>
  </p>
 </BODY>
</HTML>

除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/223.html

评论列表:

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量