Javascript 基于页面滚动更改类

基本上，我有一个单页网站，当用户点击导航菜单时会滚动

<div id="mainnav">
<ul id="nav">

<li class="fadertwo"><a id="tst" onclick="CngClass(this);" href="index.html#abouttwo">About</a></li>

<li class="faderthree"><a id="sec"  onclick="CngClass(this);" href="index.html#second">Curriculum vitae</a></li>
<li class="faderfour"><a id="third" onclick="CngClass(this);" href="index.html#thirdtwo">contact</a></li>

</ul>



</div> <!-- end mainnav -->

背景是沿着顶部重复的10px的img

#tst {background-image:url(../_images/whiteb.png);
background-repeat:repeat-x;
 -webkit-transition: .3s linear;
       -moz-transition: .3s linear;
         -o-transition: .3s linear;
            transition: .3s linear;

}


#sec {background-image:url(../_images/blackb.png);
background-repeat:repeat-x;
 -webkit-transition: .3s linear;
       -moz-transition: .3s linear;
         -o-transition: .3s linear;
            transition: .3s linear;

}

#third {background-image:url(../_images/greenb.png);
background-repeat:repeat-x; 
 -webkit-transition: .3s linear;
       -moz-transition: .3s linear;
         -o-transition: .3s linear;
            transition: .3s linear;}

现在是jquery的魔力-

<script type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='active';
 Lst=obj;
}


</script>

var-Lst；
功能CngClass（obj）{
if（typeof（obj）='string'）obj=document.getElementById（obj）；
如果（Lst）Lst.className=''；
obj.className='active'；
Lst=obj；
}

当用户点击它时，以一种非常平滑的方式改变背景位置非常有效，但当然不会因为用户自然滚动页面而改变。 现在，我可以设置身体溢出：隐藏；并且“修复”了这个问题，但它有点黑客化，会限制内容区域和整个网站布局

我想做的是使用jquery将class.active添加到基于滚动位置的a标记中，这样它仍然会更改

我环顾四周几个小时，尝试了不同的方法，但我对jquery的（缺乏）了解在某种程度上限制了我有效地实现我发现的任何东西

---

有人能提供任何解决方案吗？

看看scrollspy

或

或者看看

---

“无法使其工作”在这里没有多少信息可以帮助您。你走了多远？你遇到了什么具体的问题？当我尝试这样做时，什么都没有发生，对不起，但我无法更好地解释。你试图做什么，什么都没有发生？您是否在页面上加载了一些内容，编写了一些html或javascript，在页面上放置了一些标记，是否吸烟。认真地发布你尝试的代码，有人可能会帮助你。这更多的是一个“如何”的问题，因为坦白地说，我完全不知道如何实现javascript和jquery，尽管我已经尽了最大的努力。你不需要为我做这件事，只需要一些链接之外的指针就可以了。你有没有看过这个例子，并在我给你的这个链接上尝试过。但听起来你需要。在尝试滚动跟踪等高级功能之前，先做一些基本的javascript/jquery教程。了解jquery使用的异步模式。一旦你明白了链接中的例子是显而易见的。。

<script type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='active';
 Lst=obj;
}


</script>