Question

Basically I have a single page site that scrolls when the user clicks on the navigation menu.

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

Using jquery (which im totally new to) it adds a class when the user clicks on each link.
Basically it transitions the background position.

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

Background is a 10px img repeating along the top.

#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;}

Now the jquery magic –

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

It works great changing the background position in a really smooth way when the user clicks it, but of course doesn’t change based on the user scrolling the page naturally.
Now, I could set the body overflow to :hidden; and ‘fix’ that, but it’s a bit hacky and will limit the content area and overall site layout.

What I’d like to do is use jquery to add the class .active to the a tag based on scroll position so it changes anyway.

I’ve looked around for hours and tried different things but my (lackof) knowledge of jquery limits me somewhat it implementing anything I find effectively.

Can anyone offer any solution?

Answer 1

Have a look at scrollspy

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

or

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