侧浮导航菜单效果的jQuery实现
单页网页内容较多，页面长度较大，需要快速、方便地定位在页面的不同位置。所以浮动菜单已经很流行了，比如男装、女装、美容化妆等等。这个菜单功能分为两部分：
1，点击菜单项，页面滚动到相应的位置，可以简单地通过锚点实现；
2，当页面被滚动时，菜单项的选定状态应该被改变，这需要监视Web页面的滚动事件并通过一点计算来实现。
计算每个div scrollTop和offsettop之间的大小关系，确定网页的位置，并添加样式，根据计算结果对应的菜单项。例如，二div的偏移（）。= 300，第三DIV的偏移（）= 600。然后scrollTop = 400，这表明大部分的二div的位置是当前显示的，700是第三分以下是一个简单的例子：
复制代码代码如下所示：
1f男人的衣服
2f女人的衣服
3f美
4f数字
5f母亲和婴儿
网上购物
1f男人的衣服
复制代码代码如下所示：
*边距：0；填充：0；}
体{字体大小：12px；线高度：1.7；}
李{列表样式：无；}
#内容{宽度：800px；保证金：0汽车；padding: 20px；}
#内容h1 {颜色：# 0088bb；}
# content.item { padding: 20px；margin-bottom: 20px；边界：1px点缀# 0088bb；}
# content.item H2 {字体大小：16px；font-weight:大胆；底部边框：2px固体# 0088bb；margin-bottom: margin-bottom:；}
# content.item李{显示：内联；右边距：10px；}
李# content.item img {宽度：230px；身高：230px；边界：无；}
#菜单{位置：固定；左：50%；margin-left: 400px；顶部：100px；}
#菜单UL Li {
显示块；
5px保证金：0；
字体大小：14px；
字体粗细：粗体；
颜色：# 333；
宽度：80px；
身高：50px；
行高：50px；
文字装饰：无；
文本对齐：中心；
}
UL Li：#菜单悬停菜单，# UL Li a.current {颜色：# FFF；背景：# 0088bb；}
复制代码代码如下所示：
$（函数（）{（））
$（窗口）。滚动（函数（）{）
var = $（document）scrollTop。ScrollTop（）；
无功contentitems = $（#内容），（项目）；
VaR currentItem = ；
contentitems.each（函数（）{（）
contentitem = $（this）功；
无功offsettop = contentitem.offset（顶部）；
如果（scrollTop > offsettop-200）{ / / 200视具体情况定，因为如果你不减一个数，只是在一个滚动的div菜单的边缘，例如选择状态是错误的，，就在第一页滚动到div的底部，页面已经显示出二DIV然而，菜单或第一选择
currentItem =# + contentitem。属性（ID）；
}
}）；
如果（currentitemcurrentitem！= $（#菜单），（，），Attr（href））{
$（#菜单），（，），RemoveClass（流）；
$（#菜单），（{ href =+ currentItem +）），AddClass（流）；
}
}）；
}）；