Question

我在my site上创建粘性导航时遇到问题我注意到，当向下滚动网站时，导航的活动状态的转换稍微偏离。例如，当您滚动到网站的“名单”部分时，导航菜单会突出显示“关于”，直到您略微向下滚动。

我认为这与我的固定标题有关...？我正在使用anchor scroll plugin。但是我已经为粘性导航应用了一些Jquery。

         $(window).scroll(function () {
         if ($(window).scrollTop()>$("#contact").offset().top){  $("ul.nav-bar > li").removeClass("active")  $("#nav_5").parent().addClass("active") } else  if ($(window).scrollTop()>$("#client").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_4").parent().addClass("active") } else if ($(window).scrollTop()>$("#roster").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_3").parent().addClass("active") } else if ($(window).scrollTop()>$("#about").offset().top){ $("ul.nav-bar > li").removeClass("active") $("#nav_2").parent().addClass("active") } else if ($(window).scrollTop()>$("#home").offset().top ){ $("ul.nav-bar > li").removeClass("active") $("#nav_1").parent().addClass("active") } });

为了解决这个问题，我需要申请我的js吗？

Answer 1

似乎你也必须考虑#headerContainer的高度。

$(window).scroll(function() {
    if ($(window).scrollTop() > ($("#contact").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_5").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#client").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_4").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#roster").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_3").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#about").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_2").parent().addClass("active")
    } else if ($(window).scrollTop() > ($("#home").offset().top - $("#headerContainer").height())) {
        $("ul.nav-bar > li").removeClass("active")
        $("#nav_1").parent().addClass("active")
    }
});

粘性导航问题

1 个答案: