Question

我有一个滚动页面，侧面有一个隐藏的菜单。我想根据页面上的位置切换菜单。我已经设法检查位置并在适当的位置隐藏/显示菜单，但这只适用于页面加载。当用户向下滚动页面时，我需要使菜单始终处于活动状态并自动切换。这可能与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")
}

Answer 1

每次用户滚动时都需要重新检查位置。您可以使用onScroll事件

执行此操作

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

Answer 2

你可以使用Twitter.Bootstrap中的scrollSpy，或类似的东西：

http://getbootstrap.com/javascript/#scrollspy

根据页面上的位置切换div

2 个答案: