I have a one page website with a fixed header and some sections.
I am using scrollTo and localScroll to jump to each section, but I have a problem to add class=active
to a href
on scroll.
I can add class=active
on click, but I do not know how to do it on scroll and obviously remove it when switching from "old" to "new" section.
This is what I have done, when clicking:
$('#menu').find('a').click(selectNav);
function selectNav() {
$(this).parents('ul:first').find('a').removeClass('active').end().end().addClass('active');
}
function trigger(data) {
var el = $('#menu').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
UPDATE:
<ul id="menu">
<li><a href="#homepage"><span>Home</span></a></li>
<li><a href="#connections"><span>Connections</span></a></li>
</ul>
<section id="homepage" class="main">
..........
</section>
<section id="connections" class="main">
..........
</section>
Any help, please?