Question

我目前正在编写我的个人website，可能真的需要一些jQuery的帮助。

我希望粘性导航一旦通过标题部分就改变它的背景颜色，因为我使用了jQuery WayPoint插件。

然后我为上面的内容和标题部分下的内容定义了一些特殊的CSS。到目前为止，背景和字体颜色的变化，.active类链接和.navbar品牌的颜色不会改变。

以下脚本有问题吗？

$navbar.find('.navbar-brand').animate({color:'white'},500);
            $navbrand.css({font-weight:"normal"});

$navbar.find('.navbar-brand').animate({color:'white'},500);
            $navbrand.css({font-weight:"normal"});

如果是，那么我真的很感激为什么它不起作用的解释。

以下是完整代码：

$('#navchange').waypoint(function() {
    var $navbar = $("#changenav");
    var $navbrand = $("active > a:focus");

    if($(window).scrollTop() < $('#navchange').css("top").replace("px", "")) {
        // Above
        $navbar.animate({backgroundColor:'transparent'},300);
        $navbar.find('a').animate({color:'white'},500);
        $navbar.find('.navbar-brand').animate({color:'white'},500);
        $navbrand.css({font-weight:"normal"});

    } else {
        $navbar.animate({backgroundColor:'#FFFFFF'},500);
        $navbar.find('a:link').animate({color:'#1abc9c'},500);
        $navbar.find('.navbar-brand').animate({color:'#1abc9c'},500);
        $navbrand.css({font-weight:"bold"});

    }

});

here是我网站的链接。

Answer 1

您有一些语法错误。

您应引用.css中的css属性。

$navbrand.css({"font-weight":"normal"});
$navbrand.css({"font-weight":"bold"});

您的$navbrand选择器中也缺少一段时间。

var $navbrand = $(".active > a:focus");

通过.animate（）更改特定的CSS样式

1 个答案: