menu - ministersofdesign.comのような正確なメニューバーを作成するにはどうすればよいですか？

Question

ウェブサイトwww.ministersofdesign.comのような正確なメニューバーを作成する方法はありますか？メニューにカーソルを合わせるとフォントが赤に変わります。または、セクションまで下にスクロールすると、メニューも自動的に赤のフォントに変わります。

どうもありがとう ！

Answer 1

ScrollTopjQueryプロパティを使用する必要があります。また、各ScrollTop値に対して選択したメニューのオプションを検出するには、次の場合に簡単に実行できます。

Javascript

if ($(window).scrollTop() < 280) {
    $("#btn1").css({'background-color':'#ccc'});
    $("#btn2").css({'background-color':'#fff'});
    $("#btn3").css({'background-color':'#fff'});

    $("#c1").css({'border-color':'#000'});
    $("#c2").css({'border-color':'#ccc'});
    $("#c3").css({'border-color':'#ccc'});
}
if (($(window).scrollTop() > 280) && ($(window).scrollTop() < 450)) {
    $("#btn2").css({'background-color':'#ccc'});
    $("#btn1").css({'background-color':'#fff'});
    $("#btn3").css({'background-color':'#fff'});

    $("#c2").css({'border-color':'#000'});
    $("#c1").css({'border-color':'#ccc'});
    $("#c3").css({'border-color':'#ccc'});
}
if ($(window).scrollTop() > 450) {
    $("#btn3").css({'background-color':'#ccc'});
    $("#btn2").css({'background-color':'#fff'});
    $("#btn1").css({'background-color':'#fff'});

    $("#c3").css({'border-color':'#000'});
    $("#c1").css({'border-color':'#ccc'});
    $("#c2").css({'border-color':'#ccc'});
}

ここに私がjsFiddleで行ったちょっとしたテストがあります:)