jQuery动画导航菜单效果

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

分类：导航菜单 > 动画导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

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

<div class="header large">
 <ul class="nav">
    <li><a class="cur" href="http://www.sucaihuo.com/" title="首页">首页</a></li>
    <li><a href="http://www.sucaihuo.com/templates" title="模板">网站模板</a></li>
    <li><a href="http://www.sucaihuo.com/js" title="网页特效">网页特效</a></li>
    <li><a href="http://www.sucaihuo.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');
        }
    });
});