HTML
我们设置5个导航菜单,对应5个区域,html代码如下:
<ul class="nav">
<li><a class="pro">网站模板</a></li>
<li><a class="news">网页特效</a></li>
<li><a class="ser">字体下载</a></li>
<li><a class="con">网页源码</a></li>
<li><a class="job">图标下载</a></li>
</ul>
<div id="pro" class="box">
<h3>网站模板</h3>
</div>
<div id="news" class="box">
<h3>网页特效</h3>
</div>
<div id="ser" class="box">
<h3>字体下载</h3>
</div>
<div id="con" class="box">
<h3>网页源码</h3>
</div>
<div id="job" class="box" style="height:880px">
<h3>图标下载</h3>
</div>
当单击菜单项时,我们可以获取到当前class,根据class我们可以算出到顶端的距离。接着用动画效果滑动到菜单对应指定位置。最后记得选中当前点击菜单,也就是加上“.cur”。
若是您想要其他动画效果滚动,可以参考 <a href='http://www.sucaihuo.com/js/18.html' target='_blank'>jquery.easing动画插件</a>。
$(function(){
$(".nav li a").click(function() {
var el = $(this).attr('class');
$('html, body').animate({
scrollTop: $("#"+el).offset().top
}, 300);
//切换菜单样式
$(this).addClass("cur").parent().siblings().find("a").removeClass("cur");
});
});
还有一点,当滚动条达到某个菜单对应的节点,我们也要对此作出反应,告知用户正在浏览对应的是页面哪个节点的内容。
首先获取每个菜单对应的节点与页面顶部的距离,然后当页面滚动scroll时,获取页面滚动条的便宜距离scroH,最后将这两个值进行比较,设置对应的菜单项为选中状态。
$(function(){
var pro_top = $("#pro").offset().top; //距顶端的距离
var news_top = $("#news").offset().top;
var ser_top = $("#ser").offset().top;
var con_top = $("#con").offset().top;
var job_top = $("#job").offset().top;
$(window).scroll(function(){//滚动时触发
var scroH = $(this).scrollTop(); //获取滚动条位置
if(scroH>=job_top){
set_cur(".job");//设置选中状态
}else if(scroH>=con_top){
set_cur(".con");
}else if(scroH>=ser_top){
set_cur(".ser");
}else if(scroH>=news_top){
set_cur(".news");
}else if(scroH>=pro_top){
set_cur(".pro");
}
});
...
});
set_cur()设置当前菜单选中状态:
function set_cur(n){
if($(".nav a").hasClass("cur")){
$(".nav a").removeClass("cur");
}
$(".nav a"+n).addClass("cur");
}
最后还有一个问题需要处理:当浏览器窗口宽度大于内容区和菜单宽度时,保持菜单悬浮在内容区左侧。
$(window).resize(function(){//窗口大小发生变化
navpos();
});
//根据宽度设置菜单距左边的距离
function navpos(){
var offset = $("#main").offset().left;
var nav_w = $(".nav").outerWidth();
var left = offset-nav_w;
if(left>10){
$(".nav").css("margin-left","-170px");
}else{
$(".nav").css("margin-left",-(160+left)+"px");
}
}
最后在页面加载完,初始化菜单位置。
$(function(){
navpos();
});
若是你对平滑滚动还有疑问,可以参考<a href='http://www.sucaihuo.com/js/22.html' target='_blank'>jQuery平滑滚动到页面指定位置</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791