javascript - 为特定屏幕尺寸执行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 更改为 if。
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");
    }
  }
});