jQuery动画导航菜单效果

导航菜单改变大小原理：当滚动条距滚动距离超过100时，给.header加上.small样式，否则加上.large。

淘建站为您提供更多_导航菜单_动画导航_导航_菜单，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们先放置一个ul导航菜单。

<div class="header large">
 <ul class="nav">
    <li><a class="cur" href="http://www.sucaiq.com/" title="首页">首页</a></li>
    <li><a href="http://www.sucaiq.com/templates" title="模板">网站模板</a></li>
    <li><a href="http://www.sucaiq.com/js" title="网页特效">网页特效</a></li>
    <li><a href="http://www.sucaiq.com/psd" title="网站psd">网站psd</a></li>
 </ul>
</div>

jQuery

当滚动条下拉滚动高度超过100时，给菜单的父节点.header加上样式。

$(function(){
    $(window).on('scroll', function(){
        if($(window).scrollTop() > 100){
            $('.header').removeClass('large').addClass('small');
        } else {
            $('.header').removeClass('small').addClass('large');
        }
    });
});