在页面滚动中突出显示当前菜单项

Question

我正在网站上建立一个菜单，事情是，我无法实现改变选定的菜单项。我知道它必须通过添加一些JS来实现，但是由于我在编码中是新手，所以我没有找到任何解决方案。

菜单已经准备就绪，工作正常，然后我单击它切换为活动的项目，但是当页面开始时，没有任何活动项，并且当我使用鼠标滚动它时不会改变它。

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

<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');

});

请帮助解决这个问题。

提前感谢！

Answer 1

有一个名为skollr.js的库可以让您决定当一个元素出现在屏幕上时会发生什么。看看这个。