menu - 如何制作像 Ministersofdesign.com 一样的菜单栏？

Question

有没有办法制作一个像网站 www.ministersofdesign.com 一样的菜单栏？如果我将鼠标悬停在菜单上，字体会变成红色，或者如果我向下滚动到某个部分，菜单也会自动变成红色字体。

太感谢了 ！

Answer 1

您必须使用 ScrollTop jQuery 属性。并且要检测您为每个 ScrollTop 值选择的菜单选项，您可以使用简单的 if 来执行此操作：

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完成的小测试:)