Navbar add remove class from anchor when scrolling the page - html

Question

I'm new here, but I alreadyy searched a while for a solution not only on this site.
Ok, here's the problem:
I built a static page, with multiple sections. Each section can be shown up through an anchorlink in the navbar, which is static on the left side of the page. How can I achieve, that the link to the section, which is just shown on the screen, is active?
It should be pretty easy, if the sections would be in external html-files. But I can't find a way to make this happen in my case...
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
I think of a JavaScript that changes the classes of the links onclick, but I can't get this to work...
Please help me, tell me what I should do!
Last but not least, please excuse my poor english and coding knowledge ;)
For further explanation of the page I want to create!
This is my Navigation Menu, which has the fixed position on the left!
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
<li><h5>PARTNER </br> </br></h5></li>
<li><h5>KONTAKT </br></h5></li>
</ul>
</div>
It continues with one big section, which's contents are 4 small sections. These sections look like this:
<div id="weiss">
<div id="1" class="content section" data-id="1">
<div class="page page-1">
<div class="topic">
<img class="mwlogo" src="media/logo.png"/>
</div>
<div class="text">
<h2>...</h2>
</div>
<div class="vorteile">
<div class="first">
<ol>
<li><p>...</li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
<div class="last">
<ol>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
</div>
</div>
</div>
<div>
I linked to the activemenuitem in the index.html:
<script type="text/javascript" src="functions/js/activemenuitem.js"></script>
It looks like this:
function checkActiveSection ()
{
var fromTop = jQuery(window).scrollTop() ;
jquery('#weiss .section'.each(function() {
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
But the problem is still, that there seems to be no way for me, to get this to work! The script loads when loading the site, but no class is being added or removed from the menu classes. What do I have to do?!
Please help me!

Answer 1

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ;
if(topMargin < 100)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap1").addClass('active');
}
else if(topMargin > 100 && topMargin <200)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap2").addClass('active');
} else
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap3").addClass('active');
}
});
});
</script>
<div id="navbar">
<ul>
<li><h5>SERVICE </br> </br></h5></li>
<li><h5>LEISTUNGEN </br> </br></h5></li>
<li><h5>ÜBER UNS </br> </br></h5></li>
</ul>
</div>

Answer 2

Here is a solution adapted from Change Active Menu Item on Page Scroll? to your case :
http://jsfiddle.net/sX5Kq/1/
It's much more simple even if it's not completly optimised.
<div id="navbar">
<ul>
<li><h5>SERVICE</h5></li>
<li><h5>LEISTUNGEN</h5></li>
<li><h5>ÜBER UNS</h5></li>
<li><h5>PARTNER</h5></li>
<li><h5>KONTAKT</h5></li>
</ul>
</div>
<div id="sections">
<div class="section" data-id="1">
<h2>Services</h2>
<p></p>
</div>
<div class="section" data-id="2">
<h2>LEISTUNGEN</h2>
<p></p>
</div>
<div class="section" data-id="3">
<h2>Section 3</h2>
<p></p>
</div>
<div class="section" data-id="4">
<h2>Section 4</h2>
<p></p>
</div>
<div class="section" data-id="5">
<h2>Section 5</h2>
<p></p>
</div>
</div>
CSS
body {
font-family: Helvetica, Arial;
}
#navbar {
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
width:100px ;
}
#navbar li.active a {
color:red ;
font-weight:bold ;
}
#sections {
margin-left:110px ;
}
JS
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
jQuery('#sections .section').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;