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语句中绑定侦听器。你应该有一个监听器并在里面做检查：

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

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

如果语句未针对预期的屏幕宽度

1 个答案: