jQuery仿天猫左侧导航滚动效果

收藏

今天我们要实现的效果是：1、当点击菜单项时，可以平滑地滚动到页面指定的位置。2、当页面滚动时，菜单也随着滚动。3、当页面滚动到菜单项对应位置时，当前菜单项为选中样式。

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

查看演示

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

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

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”。

若是您想要其他动画效果滚动，可以参考 jquery.easing动画插件。

$(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(); 
});

若是你对平滑滚动还有疑问，可以参考jQuery平滑滚动到页面指定位置