本文详解如何使用jQuery实现类似京东商城的楼梯式侧边导航。通过监听窗口滚动事件与点击事件，结合offset()获取元素高度、animate()平滑滚动及DOM遍历方法，实现导航项与页面内容的双向联动定位。
jQuery楼梯式导航功能概述
本文介绍一种基于jQuery实现的京东商城风格楼梯式导航菜单，主要功能包括页面滚动时自动定位当前菜单项，以及点击菜单项平滑跳转至对应内容区域。
关键技术点与前置知识
实现该功能需要掌握jQuery中的几个核心方法：find()用于查找子元素，parent()获取父级元素，offset()计算元素相对于文档的偏移量，以及scroll()处理滚动事件。建议读者提前复习这些函数的用法。
HTML结构实现
HTML结构部分定义了导航菜单与页面内容的布局框架，具体代码如下。
<!-- 导航菜单 -->
<div id="menu">
<ul>
<li>1F<span>服饰</span></li>
<li>2F<span>美妆</span></li>
<li>3F<span>手机</span></li>
<li>4F<span>家电</span></li>
<li>5F<span>数码</span></li>
<li>6F<span>运动</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母婴</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>图书</span></li>
<li>11F<span>服务</span></li>
</ul>
</div>
<!-- 导航菜单 -->
<!-- 产品内容 -->
<div id="content">
<img src="images/head.png" alt="" style="border:1px solid red;">
<div class="louti" id="louti1"><img src="images/f1.png" alt=""></div>
<div class="louti" id="louti2"><img src="images/f2.png" alt=""></div>
<div class="louti" id="louti3"><img src="images/f3.png" alt=""></div>
<div class="louti" id="louti4"><img src="images/f4.png" alt=""></div>
<div class="louti" id="louti5"><img src="images/f5.png" alt=""></div>
<div class="louti" id="louti6"><img src="images/f6.png" alt=""></div>
<div class="louti" id="louti7"><img src="images/f7.png" alt=""></div>
<div class="louti" id="louti8"><img src="images/f8.png" alt=""></div>
<div class="louti" id="louti9"><img src="images/f9.png" alt=""></div>
<div class="louti" id="louti10"><img src="images/f10.png" alt=""></div>
<div class="louti" id="louti11"><img src="images/f11.png" alt=""></div>
</div>
<!-- 产品内容 -->
<!-- 底部 -->
<div id="footer" class="container"></div>CSS样式设计
CSS样式部分负责导航栏的固定定位、列表项的样式及激活状态的视觉反馈，具体代码如下。
#menu{
width:32px;height:360px;
position:fixed;
top:200px;left:0px;
display: none;
}
#menu ul li{
width:32px;height:32px;
list-style-type:none;
color:#8F8583;
text-align:center;
line-height: 32px;
border-bottom:1px dotted #ddd;
position:relative;
}
#menu ul li span{
display:block;width:32px;height:32px;
background:#C81623;
position:absolute;
top:0;left:0;
color:#fff;font-size:12px;
display: none;
}
#menu ul li:hover span{display:block; }
#menu ul li span.active{color:#C81623;background:#fff;display:block;}
#content{
width:1220px;
margin:0 auto;
}
#footer{width:1220px;height:600px;background:#FE7678;}
.container{margin:0 auto;}jQuery交互逻辑实现
jQuery脚本部分实现了核心的交互逻辑，包括点击事件绑定和滚动监听逻辑，具体代码如下。
$(function(){
var _index=0;
$("#menu ul li").click(function(){
$(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
_index=$(this).index()+1;
//通过拼接字符串获取元素，再取得相对于文档的高度
var _top=$("#louti"+_index).offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
var nav=$("#menu"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
if(sc.scrollTop()>=600){
$("#menu").show();
//获取滚动元素对应的索引!!!重难点
var index=Math.floor(sc.scrollTop()/600);
$("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");
}else{
$("#menu").hide();
}
});
});
滚动定位核心代码解析
在滚动交互中，常用的jQuery实现方式是通过animate方法平滑调整页面滚动条位置。
具体代码示例如下：$("body,html").animate({scrollTop:_top},500);
案例总结与注意事项
总结来说，这是一个具有实践价值的案例。虽然涉及的jQuery函数较多，但核心在于结合特殊的HTML结构设计，理清滚动导航时的条件判断逻辑，特别是如何准确计算各楼层相对于文档的高度。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。