针对特定屏幕尺寸执行javascript

Question

我有一个针对某些屏幕尺寸需要修改的javascript函数，尽管我尝试了“ if（screen.width <= 960）{...”和“ if（window.width <= 960）{...” ，仅执行“ else”之后的部分，例如，甚至不看我放在括号中的屏幕宽度。

这是我的函数（我知道它写得不好，但是我是javascript新手）：

    $(document).ready(function(){

        var numberofscroll = 0;
        var lastScrollTop = 0;
        $("#home").scroll(function(){
            var st = $(this).scrollTop();
            (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
            console.log(numberofscroll);
            console.log(lastScrollTop);
            console.log(st);
            if (numberofscroll<2){
                change_background2(numberofscroll);
            }
            else if (numberofscroll<3){
                change_background3(numberofscroll);
            }
            else if (numberofscroll<4){
                change_background4(numberofscroll);
            }

            lastScrollTop = st;
        });

        function change_background2(numberofscroll){
        var i; 
        for (i = 2) {
            $("#home").css("background-position","0 -652px");
        }
    }

          function change_background3(numberofscroll){
        var i; 
        for (i = 3) {
            $("#home").css("background-position","0 -1326px");
        }
    }

        function change_background4(numberofscroll){
        var i; 
        for (i = 4) {
            $("#home").css("background-position","0 -1978px");
        }
    }
)};

Answer 1

更正：

1. 将所有for更改for if s。
2. 更正了括号。
3. 将临时变量分配给三元运算。
4. 将所有i更改为numberofscroll

我相信正确的JavaScript是：

$(document).ready(function () {
  var numberofscroll = 0;
  var lastScrollTop = 0;
  $("#home").scroll(function () {
    var st = $(this).scrollTop();
    n = (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
    console.log(numberofscroll);
    console.log(lastScrollTop);
    console.log(st);
    if (numberofscroll < 2) {
      change_background2(numberofscroll);
    } else if (numberofscroll < 3) {
      change_background3(numberofscroll);
    } else if (numberofscroll < 4) {
      change_background4(numberofscroll);
    }
    lastScrollTop = st;
  });

  function change_background2(numberofscroll) {
    if (numberofscroll == 2) {
      $("#home").css("background-position","0 -652px");
    }
  }

  function change_background3(numberofscroll) {
    if (numberofscroll == 3) {
      $("#home").css("background-position","0 -1326px");
    }
  }

  function change_background4(numberofscroll) {
    if (numberofscroll == 4) {
      $("#home").css("background-position","0 -1978px");
    }
  }
});

Answer 2

我认为您想使用window的innerWidth属性。 （ https://developer.mozilla.org/en/docs/Web/API/window/innerWidth ）。