【特效】锚点反向联动

锚点在页面中用的很多，而且点击时会给被点击的这个锚点加一个不同的样式，这个很简单，但是，当用户滚动页面时，到达相应的锚点内容位置时，其所对应的锚点也应该显现这个样式也对，这样才达到页面的操作统一化。这就是锚点反向联动的问题。用到scrollTop()获取滚动的高度，用offset().top获取内容所在位置，两者进行比较，来动态添加class。

我发现自己描述问题的语言能力还是这么差啊，说了一堆我自己都不大懂，还是直接上代码吧：

html：

<div id="nav" class="title">

<a id="a11" href="#a1" class="current">1</a>

<a id="a22" href="#a2">2</a>

<a id="a33" href="#a3">3</a>

<a id="a44" href="#a4">4</a>

<a id="a55" href="#a5">5</a>

</div>

<br /><br />

<ul class="con">

<li id="a1">1</li>

<li id="a2">2</li>

<li id="a3">3</li>

<li id="a4">4</li>

<li id="a5">5</li>

</ul>

<div style="height:1000px;"></div>

css：

a,ul{ margin:0; padding:0}

ul,li{ list-style:none;}

.title{ position:fixed; right:0;}

.title a{ display:block; height:30px; 900px; background:#C9C; margin-top:10px; cursor:pointer;}

.title .current{ background:#060;}

.con li{ height:600px; border-bottom:1px solid #06C;}

js：

$(function(){    

    $(window).scroll(function(){                     

         var wst=$(window).scrollTop() //滚动条距离顶端值

                            for(i=1;i<6;i++){             //加循环

                                     if($("#a"+i).offset().top<=wst){ //判断滚动条位置

                                               $('#nav a').removeClass("current"); //清除c类

                                               $("#a"+i+i).addClass("current");     //给当前导航加c类

                                                }

                                      }

                                      

           })

         $('#nav a').click(function(){

                   $('#nav a').removeClass("current");

                   $(this).addClass("current");

         });

});

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2918.htm

源码下载：http://pan.baidu.com/s/1dFNWoCD