首页>>Jquery文字>>大小可变导航菜单演示(2015-06-07)

大小可变导航菜单演示

 滚动鼠标后导航条栏目会变小

大小可变导航菜单演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="header large">  
  2.     <div class="inner">  
  3.         <h1><a href="http://www.freejs.net/"><img src="../../images/logo.png" alt="logo"></a></h1>  
  4.         <ul class="nav">  
  5.             <li><a class="cur" href="http://www.freejs.net/" title="freejs">freejs</a></li>  
  6.             <li><a href="http://www.aihym.com" title="爱薅羊毛">爱薅羊毛</a></li>  
  7.   
  8.         </ul>  
  9.     </div>  
  10. </div>  

 

JavaScript Code
  1. <script>  
  2. $(function(){  
  3.     $(window).on('scroll', function(){  
  4.         if($(window).scrollTop() > 100){  
  5.             $('.header').removeClass('large').addClass('small');  
  6.         } else {  
  7.             $('.header').removeClass('small').addClass('large');  
  8.         }  
  9.     });  
  10. });  
  11. </script>  

 


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