jQuery滚动监听实现商城楼梯式导航效果

 话不多说，上局部效果图：

html结构，左侧定位的导航需要一个ul，中间内容，我是直接截得图片，为了效果省事，也是用的ul，最后你们要用的话也可以用ul，或者div，但是每个区域得是一个div，例如，精选的放一个div，女装的放一个div，所有的区域都套在一个大的div里面，也就是类似于ul>li的结构（只提供html结构和jQuery，样式的话根据设计稿）：

<div class="menu">
 <ul>
  <li class="on"><i class="iconfont">&#xe620;</i>精选</li>
  <li><i class="iconfont">&#xe62b;</i>女装</li>
  <li><i class="iconfont">&#xe62e;</i>鞋包</li>
  <li><i class="iconfont">&#xe62a;</i>男士</li>
  <li><i class="iconfont">&#xe607;</i>运动</li>
  <li><i class="iconfont">&#xe620;</i>饰品</li>
  <li><i class="iconfont">&#xe620;</i>精选</li>
  <li><i class="iconfont">&#xe620;</i>女装</li>
  <li><i class="iconfont">&#xe620;</i>鞋包</li>
  <li><i class="iconfont">&#xe620;</i>男士</li>
  <li><i class="iconfont">&#xe620;</i>运动</li>
  <li><i class="iconfont">&#xe620;</i>饰品</li>
 </ul>
</div>
<div class="main">
 <ul>
  <li><img src="images/main_pic1.png" /></li>
  <li><img src="images/main_pic2.png" /></li>
  <li><img src="images/main_pic3.png" /></li>
  <li><img src="images/main_pic4.png" /></li>
  <li><img src="images/main_pic5.png" /></li>
  <li><img src="images/main_pic6.png" /></li>
  <li><img src="images/main_pic7.png" /></li>
  <li><img src="images/main_pic8.png" /></li>
  <li><img src="images/main_pic9.png" /></li>
  <li><img src="images/main_pic10.png" /></li>
  <li><img src="images/main_pic11.png" /></li>
  <li><img src="images/main_pic12.png" /></li>
 </ul>
</div>

<script src="js/jquery.js"></script>
<script>
 var offon = true;
 $(window).scroll(function(){//滚动浏览器就会执行
  if(offon){
  //获取滚动高度
  var _top = $(window).scrollTop();
  if(_top>150){
   $('.menu').show();
  }else{
   $('.menu').hide();
  };
  $('.main ul li').each(function(i){
   //获取当前下标
   var _index = $(this).index();
   var _height = $(this).offset().top+500;//获取上偏移值
   if(_height > _top){//优先原则
    $('.menu ul li').eq(_index).addClass('on').siblings().removeClass('on');
    return false;//跳出遍历
   };
  });
  };
 });
 $('.menu ul li').click(function(){
  offon = false;
  var _index = $(this).index();
  $(this).addClass('on').siblings().removeClass('on');
  var _height = $('.main ul li').eq(_index).offset().top;//获取上偏移值
  $('body,html').animate({scrollTop:_height},500,function(){
   offon = true;
  });
 });
</script>

以上所述是小编给大家介绍的jQuery滚动监听实现商城楼梯式导航，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jquery  # 滚动监听导航  # 滚动监听  # JavaScript实现楼梯滚动特效(jQuery实现)  # jQuery仿京东商城楼梯式导航定位菜单  # jquery实现滑动楼梯效果  # 小编  # 是一个  # 我是  # 鞋包  # 就会  # 在此  # 可以用  # 遍历  # 给大家  # 要用  # 多说  # 只提供  # 类似于  # 所述  # 话也  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # xe62e 

相关文章： b2c电商网站制作流程,b2c水平综合的电商平台？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  如何获取上海专业网站定制建站电话？  制作网站外包平台,自动化接单网站有哪些？  高性价比服务器租赁——企业级配置与24小时运维服务  简历在线制作网站免费版,如何创建个人简历？  教学网站制作软件,学习*后期制作的网站有哪些？  如何通过可视化优化提升建站效果？  如何在阿里云高效完成企业建站全流程？  名字制作网站免费,所有小说网站的名字？  油猴 教程,油猴搜脚本为什么会网页无法显示？  攀枝花网站建设,攀枝花营业执照网上怎么年审？  建站之星安装模板失败：服务器环境不兼容？  专业公司网站制作公司,用什么语言做企业网站比较好？  中山网站制作网页,中山新生登记系统登记流程？  css网站制作参考文献有哪些,易聊怎么注册？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  ,怎么在广州志愿者网站注册？  建站主机与服务器功能差异如何区分？  高防服务器如何保障网站安全无虞？  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  孙琪峥织梦建站教程如何优化数据库安全？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  建站主机选购指南：核心配置优化与品牌推荐方案  ,如何利用word制作宣传手册？  微信h5制作网站有哪些,免费微信H5页面制作工具？  视频网站app制作软件,有什么好的视频聊天网站或者软件？  招商网站制作流程,网站招商广告语？  内部网站制作流程,如何建立公司内部网站？  如何通过商城自助建站源码实现零基础高效建站？  高防服务器租用首荐平台，企业级优惠套餐快速部署  Swift中switch语句区间和元组模式匹配  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  建站之星后台管理：高效配置与模板优化提升用户体验  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  ,怎么用自己头像做动态表情包？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  C#如何序列化对象为XML XmlSerializer用法  如何用已有域名快速搭建网站？  公众号网站制作网页,微信公众号怎么制作？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  如何快速建站并高效导出源代码？  如何在IIS中新建站点并配置端口与IP地址？  建站之星导航配置指南：自助建站与SEO优化全解析  seo网站制作优化,网站SEO优化步骤有哪些？