Javascript 根据页面上的位置切换div

我有一个滚动页面，旁边有一个菜单。我想根据页面上的位置切换菜单。我已经成功地检查了位置，并在适当的位置隐藏/显示菜单，但这只适用于页面加载。我需要将菜单设置为不断激活，并在用户向下滚动页面时自动切换。使用jquery/js可以做到这一点吗？这是我目前的代码：

var nav = $(".nav-links").offset();
var about = $("#page-about").offset();
var location = $("#page-location").offset();
var amenities = $("#page-amenities").offset();
var art = $("#page-art").offset();
var availabilities = $("#page-availabilities").offset();
var contact = $("#page-contact").offset();

console.log("amenities position " + amenities.top);
console.log("nav position " + nav.top);

if (about.top < nav.top) {
    $('.nav-links').css("display", "none");
}

if (location.top < nav.top) {
    $('.nav-links').css("display", "none");
}

if (amenities.top < nav.top) {
    $('.nav-links').css("display", "block");
}

if (art.top < nav.top) {
    $('.nav-links').css("display", "none")
}

if (availabilities.top < nav.top) {
    $('.nav-links').css("display", "none")
}

if (contact.top < nav.top) {
    $('.nav-links').css("display", "block")
}

var nav=$（“.nav links”）.offset（）；
var about=$（“#第页关于”）.offset（）；
变量位置=$（“#页面位置”）.offset（）；
var便利设施=$（“#页面便利设施”）.offset（）；
var art=$（“#页面艺术”）.offset（）；
var availabilities=$（“#页面可用性”）.offset（）；
var contact=$（“#页面联系人”）.offset（）；
控制台日志（“便利设施位置”+便利设施顶部）；
控制台日志（“导航位置”+导航顶部）；
如果（大约顶部<导航顶部）{
$（'.nav links'）.css（“显示”、“无”）；
}
如果（位置顶部<导航顶部）{
$（'.nav links'）.css（“显示”、“无”）；
}
如果（顶部<导航顶部）{
$（'.nav links'）.css（“显示”、“块”）；
}
如果（艺术顶部<导航顶部）{
$（'.nav links'）.css（“显示”、“无”）
}
if（availabilities.top

您可以使用Twitter.Bootstrap上的scrollSpy或类似工具：

---

每次用户滚动时，您都需要重新检查位置。您可以通过onScroll事件执行此操作

$(document).on('scroll', function () {
    // toggle code goes here
});