Question

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

<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 -->

使用jquery（我是全新的），当用户点击每个链接时，它会添加一个类。基本上它会转换背景位置。

    .active {
background-position:bottom;
text-decoration:none;
 -webkit-transition: .3s linear;
       -moz-transition: .3s linear;
         -o-transition: .3s linear;
            transition: .3s linear;
}

背景是在顶部重复的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>

当用户点击它时，以非常流畅的方式更改背景位置非常有效，但当然不会因用户自然滚动页面而改变。现在，我可以将身体溢出设置为：隐藏;并且'修复'，但它有点hacky并将限制内容区域和整体网站布局。

我想要做的是使用jquery根据滚动位置将类.active添加到标记中，以便它仍然会发生变化。

我环顾了好几个小时，尝试了不同的东西，但是我对jquery的了解（缺乏）限制了我实际上有效地实现的任何东西。

任何人都可以提供任何解决方案吗？

Answer 1

看看scrollspy

http://twitter.github.com/bootstrap/javascript.html#scrollspy

或

https://github.com/sxalexander/jquery-scrollspy

Answer 2

或者看看 http://imakewebthings.com/jquery-waypoints/

根据页面滚动更改类

2 个答案: