Execute javascript for certain screen size

Question

I have a javascript function that I need modified for certain screen sizes, though I've tried "if (screen.width <= 960) {... " and "if (window.width <= 960) {..." , only the part after "else" get's executed, like it's not even looking at the screen width I'm placing in the parenthesis.

Here is my function ( I know it's poorly written, but I'm new to 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

Corrections:

1. Changed all the for to if s.
2. Corrected the parentheses.
3. Assigned a temp variable to ternary operation.
4. Changed all the i to numberofscroll

I believe the corrected JavaScript is:

$(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

I think you want to use the innerWidth property of window. ( https://developer.mozilla.org/en/docs/Web/API/window/innerWidth ).