Minimalistic ScrollSpy

HTML

<div id="navbar">
    <ul>
         <li data-id="1"><h5><a href="#1">SERVICE</a></h5></li>
         <li data-id="2"><h5><a href="#2">LEISTUNGEN</a></h5></li>
         <li data-id="3"><h5><a href="#3">ÜBER UNS</a></h5></li>
         <li data-id="4"><h5><a href="#4">PARTNER</a></h5></li>
         <li data-id="5"><h5><a href="#5">KONTAKT</a></h5></li>
    </ul>
</div>

<div id="sections">

    <div class="section" data-id="1">
        <h2>Services</h2>
		<p>Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section Here is your first section </p>
    </div>

	<div class="section" data-id="2">
		<h2>LEISTUNGEN</h2>
		<p>Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section Here is the LEISTUNGEN section </p>
	</div>
		
	<div class="section" data-id="3">
		<h2>Section 3</h2>
		<p>Here is the Section 3 Here is the Section 3 Here is the Section 3 Here is the...

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

.section {   
    border:1px dotted grey ;
    padding:20px 0 ;
}

.section p {
    letter-spacing:5px ;
    line-height:2em ;
}

JavaScript

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() ;
}) ;