实现百度百科页面导航效果
本周无意中看到了百度百科页面导航效果，感觉相当不错，周末写下来。下图是导航部分的效果图：
CSS和图片都是从百度复制的，可以从百度下载。
具体代码如下：
复制代码代码如下所示：
{ *
保证金：0；
填充物：0
}
{。包
宽度：1000px；
溢出：隐藏；
保证金：0汽车；
}
{。内容
宽度：780px；
浮点数：左；
}
{。滑
宽度：200px；
浮子：右边；
}
一
第一部分
内容，内容
二
第二部分
内容，内容
2-1
part2-1
content2-1，content2-1
2-2
第二部分
content2-2，content2-2
三
第三部分
内容，内容
四
第四部分
内容，内容
五
第五部分
含量，含量
六
第六部分
含量6%，含量6%
七
7
content7，content7
八
8
Content8，Content8
九
第9部分
content9，content9
十
part10
含量，含量
十一
第二部分
content11，content11
十二
第12部分
含量，含量
十三
13
content13，content13
十四
part14
content14，content14
十五
Part15
content15，content15
底
一
第一部分
二
第二部分
2-1
part2-1
2-2
第二部分
三
第三部分
四
第四部分
五
第五部分
六
第六部分
七
7
八
8
九
第9部分
十
part10
十一
第二部分
十二
第12部分
十三
13
十四
part14
十五
Part15
slideinnerheight = $（var目录的# sidecatalog DL）Height（）；
slideoutheight = $（var的# sidecatalog目录）的Height（）；
无功enabletop = slideinnerheight - slideoutheight；
var步骤= 50；
单击按钮以
$（# sidecatalog down）。Bind（听到咔哒声，函数（））{
如果（$（this）。HasClass（'sidecatalog-down-enable '））{
如果（（enabletop - Math.abs（parseInt（parseInt（# sidecatalog目录DL）。Css（' '）））>步）{
$（# sidecatalog目录（DL）。停止。动画）（{ ' '：' = ' +步}，'fast）；
$（# sidecatalog）。RemoveClass（'sidecatalog-up-disable）。AddClass（'sidecatalog-up-enable）；
{人}
$（# sidecatalog目录DL）。停止（）。动画（{顶：- enabletop }，'fast）；
$（这）。RemoveClass（'sidecatalog-down-enable）。AddClass（'sidecatalog-down-disable）；
}
{人}
返回false；
}
}）
单击向下按钮
$（# sidecatalog）。Bind（听到咔哒声，函数（））{
如果（$（this）。HasClass（'sidecatalog-up-enable '））{
如果（Math.abs（parseInt（# sidecatalog目录DL）。Css（' '）））>步）{
$（# sidecatalog目录（DL）。停止。动画）（{ ' '：' + = +步}，'fast）；
$（# sidecatalog down）。RemoveClass（'sidecatalog-down-disable）。AddClass（'sidecatalog-down-enable）；
{人}
$（# sidecatalog目录DL）。停止（）。动画（{顶：0}，'fast）；
$（这）。RemoveClass（'sidecatalog-up-enable）。AddClass（'sidecatalog-up-disable）；
}
{ { { }
返回false；
}
}）
每一次点击导航在
$（# sidecatalog目录DL），委托（'dd '，点击'，功能（e）{ {）
var索引= $（this）；
scrollslide（$（this），指数）；
VaR做了课堂的预习=美元（这）找到（'a'）。停止（）。Attr（'href）。Substring（1）；
windowtop = $（{ var名称=+做了课堂的预习+）。偏移（顶部）；
（'body美元，HTML），动画（{ scrollTop：windowtop }，'fast）；
$（这）。AddClass（'heightlight）。兄弟姐妹（'dd）。RemoveClass（'heightlight）；
}）
滚动滚动页面。
$（文档）滚动（函数（）{）
VaR len = $（'。headline-1的长度）；
对于（var i = len-1；我> = 0；我--）{
如果（$（this）（。scrollTop）> = $（'。headline-1）。Eq（我）。偏移（顶部）$（'。headline-1）。Eq（我）（的高度））{
var索引= i；
$（# sidecatalog目录DL DD）。情商（指数），AddClass（'heightlight）。兄弟姐妹（'dd）。RemoveClass（'heightlight）；
scrollslide（$（' # sidecatalog目录DL DD）。情商（指数），指数）；
返回false；
{ { { }
$（# sidecatalog目录DL DD）。情商（0），AddClass（'heightlight）。兄弟姐妹（'dd）。RemoveClass（'heightlight）；
}
}
}）
导航滚动条，并显示隐藏按钮，
功能scrollslide（，指数）{
如果（索引< 5）{
$（# sidecatalog目录DL）。停止（）。动画（{顶：0}，'fast）；
$（# sidecatalog down）。RemoveClass（'sidecatalog-down-disable）。AddClass（'sidecatalog-down-enable）；
$（# sidecatalog）。RemoveClass（'sidecatalog-up-enable）。AddClass（'sidecatalog-up-disable）；
{ { if（索引> 11）
$（# sidecatalog目录DL）。停止（）。动画（{顶：- enabletop }，'fast）；
$（# sidecatalog down）。RemoveClass（'sidecatalog-down-enable）。AddClass（'sidecatalog-down-disable）；
$（# sidecatalog）。RemoveClass（'sidecatalog-up-disable）。AddClass（'sidecatalog-up-enable）；
{人}
无功dltop = parseInt（$（' # sidecatalog目录DL）。Css（' '））+ slideoutheight / 2（that.offset（）。顶- $（document）。ScrollTop（））））；
$（# sidecatalog目录DL）。停止（）。动画（{顶：dltop }，'fast）；
$（# sidecatalog down）。RemoveClass（'sidecatalog-down-disable）。AddClass（'sidecatalog-down-enable）；
$（# sidecatalog）。RemoveClass（'sidecatalog-up-disable）。AddClass（'sidecatalog-up-enable）；
}
}
车站是一个站式，他们也有很多效果，开始利用朋友可以经常去购物，很容易找到一些好东西。