Highlighting Current Menu Item On Page Scroll

Question

I am building a menu on a web site, and the thing is that I can't realize changing of a selected menu item. I know that it has to be made by adding some JS, however as I am new in the coding I did not find any solution.

The menu is ready and works fine then I click on an item it switches to active, but when the page starts there is no any active item and not changing when I scroll it using mouse.

CSS

#menu li {
display:inline-block;
float: right;
margin-top: 8px;
}

#menu {
position:fixed;
z-index: 70;
height: 60px;
width: 100%;
background-color: #FFFFFF;
}
/**home-button**/
#menu #Home-button a:hover {
background-image:url(images/home_hov.gif);
background-repeat: no-repeat;
}
#menu #Home-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/home_st.png);
background-repeat: no-repeat;
}
/**about-button**/
#menu #About-button a:hover  {
background-image:url(images/about_hov.gif);
background-repeat: no-repeat;
}
#menu #About-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/about_st.png);
background-repeat: no-repeat;
}
/**works-button**/
#menu #Works-button a:hover  {
background-image:url(images/works_hov.gif);
background-repeat: no-repeat;
}
#menu #Works-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/works_st.png);
background-repeat: no-repeat;
}
/**contacts-button**/
#menu #Contacts-button a:hover  {
background-image:url(images/contacts_hov.gif);
background-repeat: no-repeat;
}
#menu #Contacts-button a {
padding: 20px 20px;
display:inline-block;
background-image:url(images/contacts_st.png);
background-repeat: no-repeat;
}

/**selected-items**/
#menu #Home-button.active  a {
background-image:url(images/home_act.png);
background-repeat: no-repeat;
}
#menu #About-button.active  a {
background-image:url(images/about_act.png);
background-repeat: no-repeat;
}
#menu #Works-button.active  a {
background-image:url(images/works_act.png);
background-repeat: no-repeat;
}
#menu #Contacts-button.active  a {
background-image:url(images/contacts_act.png);
background-repeat: no-repeat;
}

HTML

<nav id="menu">
    <ul>
        <li id="Home-button" ><a id="home" class="hightlight" href="#"></a></li>
        <li id="About-button"><a id="about" class="hightlight" href="#"></a></li>
        <li id="Works-button" ><a id="works" class="hightlight" href="#"></a></li>
        <li id="Contacts-button"><a id="contacts" class="hightlight" href="#"></a></li>
    </ul>
</nav>

JavaScript

var menu = menu = $('#menu ul');

$('.hightlight').click(function(event) {

    menu.children().removeClass();
    $(this).parent().addClass('active');

});

Please help to resolve the problem.

Thanks in advance!

Answer 1

There's a library called skollr.js that let you decide what happen when an element appear on the screen. Check it out.