jQuery实现侧边浮动导航菜单效果

单页面网页内容较多，页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，如下图男装、女装、美妆等。

这种菜单功能分为两部分：

1、点击菜单项，网页滚动到对应位置，可简单通过锚点实现；

2、滚动页面的时候，菜单项的选中状态要跟着改变，这就需要监听网页的滚动事件并通过一点计算来实现了；

计算滚动顶部和各个差异的偏移的大小关系，判断现在网页显示的位置在什么地方，再根据计算的结果给对应的菜单项添加样式。比如第二个差异的偏移量()。top=300，第三个差异的偏移量()。top=600，此时的scrollTop=400，说明现在显示的大部分是第二个差异的位置，700 则是第三个div。下面是一个简单的例子：

复制代码代码如下： div id=' menu ' ul lia href=' # item 1 ' class=' current ' 1F男装2F女装3F美妆/a/li lia href='#item4'4F数码/a/li lia href='#item5'5F母婴/a/li /ul/divdiv id='content' h1网购/h1

div id='item1' class='item' h21F男装/H2 ul lia href=' # ' img src=' http : ' alt=' '//a/Li！-若干个li - /ul /div！-若干个项目/部门

复制代码代码如下： * { margin : 0；padd : 0；} body { font-size : 12px线高： 1.7;}李{列表式：无；} #内容{ width : 800 pxmargin : 0 autopadding : 20px } #内容h1 { color: # 0088bb} #内容。项目{ padding: 20px边距-底部： 20pxborder: 1px虚线# 0088bb} #内容。项目H2 { font size : 16px；字体粗细：粗体；边框-bottom: 2px实心# 0088bb边距-底部： 10px} #内容。项目Li { display : inline margin-right : 10px；} #内容。项目阿利img { width : 230 pxhire : 230 pxborder :无；} #菜单{位置：固定左侧：50%;左边距left:400pxtop:100px} #菜单保险商实验所阿利{ display : block margin : 5px 0；font-size : 14px字体粗细：粗体；颜色： # 333宽度： 80px高度： 50px线高： 50px文本装饰：无；文本对齐：中心；} #菜单ul li a:hover，#菜单ul li a.current { color: # fff背景技术# 0088bb}

复制代码代码如下：$(函数(){ $(窗口))。scroll(function(){ var scroll top=$(document)).滚动顶部()；var contentItems=$('#content ').查找('。项目');var currentItem=内容项。每个(function(){ var content item=$(this)；var偏移量top=ContentItem。偏移量().顶部；if(scrollTop offsetTop-200){//此处的200视具体情况自行设定，因为如果不减去一个数值，在刚好滚动到一个差异的边缘时，菜单的选中状态会出错，比如，页面刚好滚动到第一个差异的底部的时候，页面已经显示出第二个div，而菜单中还是第一个选项处于选中状态当前项目=“#”ContentItem。attr(' id ')；} });if(currentItemcurrentItem！=$(“# menu”).查找('。当前')。attr(' href '){ $(' # menu ').查找('。当前')。removeClass(“”当前');$(“# menu”).find('[href=' currentItem ']').添加CLaSS(' current ')；} });});