如何製作像ministersofdesign.com一樣的菜單欄？

Question

有沒有辦法像網站www.ministersofdesign.com一樣準確地製作菜單欄？ 如果我將鼠標懸停在菜單上，字體會變成紅色，或者如果向下滾動到某個區域，菜單也會自動變成紅色字體。

非常感謝！

Answer 1

你必須使用ScrollTop jQuery屬性。並檢測你所選定的每個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 :)完成