导航菜单改变大小原理:当滚动条距滚动距离超过100时,给.header加上.small样式,否则加上.large。
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');
}
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791