javascript - If 语句不针对预期的屏幕宽度

Question

当屏幕达到一定宽度时，我会触发一些 JavaScript...我正在尝试使其具有移动响应能力，并需要它在不同设备上的不同点触发...

var screenWidth = window.innerWidth;

if (screenWidth <= 812 && screenWidth > 414) {
   $(window).scroll(function() {

     var fromTopPxFirstBgChange = 2300;
     var scrolledFromtop = $(window).scrollTop();

     if (scrolledFromtop > fromTopPxFirstBgChange) {
       $('body').addClass('secondBg');
     }
     else {
       $('body').removeClass('secondBg');
     }
   });
}

if (screenWidth <= 414 && screenWidth > 375) {
   $(window).scroll(function() {

     var changeBg = 2190;
     var scrolledFromtop = $(window).scrollTop();

     if (scrolledFromtop > changeBg) {
       $('body').addClass('secondBg');
     }
     else {
       $('body').removeClass('secondBg');
     }
   });
}

if (screenWidth <= 375 && screenWidth > 320) {
   $(window).scroll(function() {

     var changeBgImage = 2380;
     var scrolledFromtop = $(window).scrollTop();

     if (scrolledFromtop > changeBgImage) {
       $('body').addClass('secondBg');
     }
     else {
       $('body').removeClass('secondBg');
     }
   });
 }

例如，对于第一个，我希望屏幕在 414-812px 处应用这些更改。

基本上，当我滚动到我在每个 if 语句中指定的页面位置时，背景图像应该会发生变化(类“secondBg”是我在 CSS 中使用新背景图像指定的类...我不知道这是一个 JS 错误还是其他代码的问题。当我只有一个 if 语句时，它似乎工作统一，但当我添加三个时，它们会工作并相互覆盖。我认为 if 语句很清楚，看不到问题。

Answer 1

您不应该在 if 语句内绑定(bind)您的监听器。相反，您应该有 1 个监听器并在内部进行检查，如下所示:

$(window).scroll(function() {
  if($(window).scrollTop() < 500) {
    // Your code here
  }
  // add more checks here
});

另外，我会限制它，因为这是一个非常繁重的操作。看看this .