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 

相关文章： 湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  如何快速选择适合个人网站的云服务器配置？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  如何用西部建站助手快速创建专业网站？  建站之星多图banner生成与模板自定义指南  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  如何通过VPS搭建网站快速盈利？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  h5网站制作工具有哪些,h5页面制作工具有哪些？  山东网站制作公司有哪些,山东大源集团官网？  如何在Tomcat中配置并部署网站项目？  建站之星如何助力企业快速打造五合一网站？  如何配置支付宝与微信支付功能？  如何选择靠谱的建站公司加盟品牌？  如何在建站之星绑定自定义域名？  建站VPS推荐：2025年高性能服务器配置指南  表情包在线制作网站免费,表情包怎么弄？  已有域名和空间，如何快速搭建网站？  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  定制建站方案优化指南：企业官网开发与建站费用解析  如何高效搭建专业期货交易平台网站？  建站主机是否属于云主机类型？  黑客入侵网站服务器的常见手法有哪些？  临沂网站制作企业,临沂第三中学官方网站？  建站主机服务器选型指南与性能优化方案解析  如何挑选优质建站一级代理提升网站排名？  视频网站制作教程,怎么样制作优酷网的小视频？  如何快速搭建高效WAP手机网站？  建站之星如何实现PC+手机+微信网站五合一建站？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  高端网站建设与定制开发一站式解决方案 中企动力  如何在搬瓦工VPS快速搭建网站？  建站上传速度慢？如何优化加速网站加载效率？  建站之星24小时客服电话如何获取？  建站三合一如何选？哪家性价比更高？  股票网站制作软件,网上股票怎么开户？  制作证书网站有哪些,全国城建培训中心证书查询官网？  建站之星代理如何优化在线客服效率？  海南网站制作公司有哪些,海口网是哪家的？  如何在IIS7上新建站点并设置安全权限？  如何解决VPS建站LNMP环境配置常见问题？  威客平台建站流程解析：高效搭建教程与设计优化方案  音乐网站服务器如何优化API响应速度？  高防服务器：AI智能防御DDoS攻击与数据安全保障  制作网站怎么制作,*游戏网站怎么搭建？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  网页设计网站制作软件,microsoft office哪个可以创建网页？