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 :)

的测试

如何制作像ministersofdesign.com这样精确的菜单栏？

1 个答案: