0

サイトにスティッキー ナビゲーションを作成する際に問題が発生しています。
サイトを下にスクロールすると、ナビゲーションのアクティブ状態の遷移がわずかにずれていることに気付きました。たとえば、サイトの「名簿」セクションまでスクロールすると、少し下にスクロールするまで、ナビゲーション メニューで「概要」が強調表示されます。

これは固定ヘッダーと関係があると思います...？アンカー スクロール プラグインを使用しています。ただし、スティッキー ナビゲーション用に少し 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 に適用する必要があるものはありますか?

4

1 に答える 1

0

#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")
    }
});
于 2013-01-24T00:09:43.073 に答える