Question

我正在建立我的第一个网站，我希望导航栏在大于992px的屏幕上透明，当滚动到400px以下时，颜色变为黑色。在小于992px的屏幕尺寸上，我希望导航栏始终为黑色。我的JS当前以我想要的屏幕尺寸超过992px的方式工作，但是在屏幕尺寸小于992px的地方我希望它是黑色的，这是透明的。

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if(scroll < 400) && ($(window).width() <= 993){
        $('.navbar').css('background', 'transparent');
    } else{
        $('.navbar').css('background', 'rgba(34, 34, 34, 1)');
    }
});

Answer 1

让我们用一些CSS来解决这个问题，使用媒体查询比在每一帧上调用的javascript函数更快，更可靠。

.navbar{
  background: transparent;
}

.blackBg{
  background: rgba(34, 34, 34, 1);
}

/* Lets set the navbar as black on these smaller devices*/
@media screen and (max-width:992px) {
   .navbar{
     background: rgba(34, 34, 34, 1) !important;
   }
 }

接下来，在脚本中，仅当滚动400以上时才将背景更改为黑色，从而从代码中删除了窗口宽度要求

$(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if(scroll < 400){
      $('.navbar').removeClass('blackBg');
    }else{
      $('.navbar').addClass('blackBg');
    }
});

Answer 2

您可以使用Media查询并在其中编写条件

在滚动条和屏幕宽度上更改导航栏颜色

2 个答案: