Question

我正在尝试添加一个JavaScript，该Javascript向下滚动150像素时会更改标题颜色。如果将网页调整为某个宽度（991px），我也希望它不会触发。

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 150 && width > 991px) {
        $(".bg-header").css("background-color" , "rgba(0, 0, 0, .8)");
      }

      else{
          $(".bg-header").css("background-color" , "transparent");
      }
  })
})

什么等于(window).scrollTop()，但页面宽度呢？

Answer 1

这是您代码的固定版本：

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    var width = $(window).innerWidth();
    if (scroll > 150 && width > 991) {
        $(".bg-header").css("background-color" , "rgba(0, 0, 0, .8)");
    } else{
        $(".bg-header").css("background-color" , "transparent");
    }
  });
});

如上面的注释中所述，如果要比较值，则应省略单位（px）。

Answer 2

这里是非jQuery依赖版本，在功能上应与您要查找的版本等效：

document.addEventListener('scroll', () => {
    var width = window.innerWidth;
    var scroll = window.scrollY;

    var header = document.querySelector('.bg-header');
    if (scroll > 150 && width > 991) {
        header.style.backgroundColor = "rgba(0, 0, 0, .8)";
    }
    else {
        header.style.backgroundColor = "rgba(0,0,0,.4)";
    }
});

如果向下滚动并达到一定宽度，则触发Javascript

2 个答案: