最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-09 23:33浏览(1606)

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

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

jQuery仿天猫左侧导航滚动效果
分类:导航菜单 > 图标导航 难易:中级
查看演示

加我微信,拉你进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平滑滚动到页面指定位置

标签: 导航滚动左侧
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/21.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    06-24 09:30
    ngu137
    很不错的滚动效果。。。。
  • 头像 椅子
    04-07 12:58
    aahanbb
    不错,学习学习,非常受教
  • 头像 沙发
    11-03 09:39
    ngu137
    不粗 学习啦啊啊啊啊。。。
1 2