jQuery动画导航菜单效果

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

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