Question

我创建了一个导航栏，使用js根据滚动更改颜色。我想在滚动之前添加一个底部边框线，使用属性＆＃34; thin＆＃34; ＆＃34;固体＆＃34;和白色（#FFFFFF或rbga（255,255,255），但我的语法问题我猜。其他一切正常，滚动的颜色变化，但我无法找出底部边框。我很确定我只是有语法错误。

type="text/javascript">
    $(document).ready(function(){
    $(window).on("scroll",function(){
    var wn = $(window).scrollTop();
    if(wn > 20){
        $(".navbar").css("background","#191918");       
    }
    else{
        $(".navbar").css("border-bottom","thin solid rbg(255,255,255)");
        $(".navbar").css("background","rgba(0,0,0,0)");     
    }
  });
});

任何帮助都将不胜感激。

Answer 1

您需要使用rgb(255,255,255)而不是rbga。 Rgba需要4个参数。检查rgb和rgba https://www.w3schools.com/cssref/css_colors_legal.asp

之间的区别

你将边框底部设置为白色，所以我猜你没有看到它。检查例子，我希望你看到它here - Aksana Tolstoguzova 关于背景，你设置不透明度0，所以如果父母的背景也有白色，你也看不到它。

Answer 2

想出来，是一个语法错误的组合，还需要在更改中添加一行以将线转换为黑色以及覆盖它。

type="text/javascript">
    $(document).ready(function(){
    $(window).on("scroll",function(){
    var wn = $(window).scrollTop();
    if(wn > 20){
        $(".navbar").css("border-bottom","thin solid rgb(0,0,0)");
        $(".navbar").css("background","#191918");
        $(".navbar").css("transition-duration","0.2s");
    }
    else{
        $(".navbar").css("border-bottom","thin solid rgb(255,255,255)");
        $(".navbar").css("background","rgba(0,0,0,0)");     
    }
  });
});

继续这个我还有一个问题，当页面加载时行不存在，只有在我滚动时才有效。 .navbar目前没有css，添加到.navbar的任何css似乎都不会影响页面。有什么想法吗？

滚动时js导航栏边框底线和颜色更改

2 个答案: