首页>>Jquery文字>>固定位置的导航条 一直在顶部的导航条(2017-08-01)

固定位置的导航条 一直在顶部的导航条

固定位置的导航条 一直在顶部的导航条
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="top">  
  2.         <div class="main">  
  3.             <div class="logo">  
  4.                 <img src="../../images/logo.png" height="47" width="500" alt="freejs首页" />  
  5.             </div>  
  6.             <div class="nav_bar">  
  7.                 <ul>  
  8.                     <li><a href="">首页</a></li>  
  9.                     <li class="l1">  
  10.                         <a href="">产品</a>  
  11.                         <div class="hid">  
  12.                             <ul>  
  13.                                 <li><a href="">一级</a></li>  
  14.                                 <li><a href="">二级</a></li>  
  15.                                 <li><a href="">三级</a></li>  
  16.                                 <li><a href="">四级</a></li>  
  17.                                 <li><a href="">五级</a></li>  
  18.                                 <li><a href="">六级</a></li>  
  19.                             </ul>  
  20.                         </div>  
  21.                     </li>  
  22.                     <li><a href="">案例</a></li>  
  23.                     <li><a href="">联系我们</a></li>  
  24.                     <li><a href="">招聘</a></li>  
  25.                     <li><a href="">关于我们</a></li>  
  26.                 </ul>  
  27.             </div>  
  28.             <div class="login">  
  29.                 <a href="" class="a1">登陆</a>  
  30.                 <a href="" class="a2">注册</a>  
  31.             </div>  
  32.         </div>  
  33.     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         var head=$(".head").height();  
  3.         $(window).scroll(function(){  
  4.             var topScr=$(window).scrollTop();  
  5.             if (topScr>head) {  
  6.                 $(".top").addClass("fixed");  
  7.             }else{  
  8.                 $(".top").removeClass("fixed");  
  9.             }  
  10.         })  
  11.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_630.html