How can I manipulate a value on each scroll movement?

Question

I want to manipulate the value of sum on each scroll. If I scroll down, the value should increase to whatever I want, and if I scroll up, the value should reduce to whatever value I want as long as it does not get less than zero.

$(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;
    var sum = 0;
    if (delta > 0){
        sum++;
        console.log("going down");
        console.log(sum);

    } else {
      //sum--;
        console.log("going up");
    }
    return false;
});

html,
  body{
    height: 100%;
  }
  #firstbox{
    background: red;
  }

  #second_box{
    background: blue;
  }

  #third_box{
    background: black;
  }

  .general{
    width: 100%;
    height: 100%;
  }

  header{
      width: 100%;
      height: 100%;
  }
  img{
      width: 100%;
      height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbox" class="general">
      <header><img src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here"></header>
  </div>
  <div id="second_box" class="general">

  </div>

  <div id="third_box" class="general">

  </div>

At the moment, the value does not increase/decrease and keeps repeating instead.

How can I manipulate(increase/decrease) the value of sum on each scroll?

Thanks in advance

Answer 1

Move var sum = 0 out of the trigger function. It sets to zero on every scroll in your implementation:

var sum = 0;

$(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;
    
    if (delta > 0){
        sum++;
        console.log("going down");
        console.log(sum);

    } else {
        if (sum > 0) {
          sum--;
        }
        console.log("going up");
        console.log(sum);
    }
    return true;
});

html,
  body{
    height: 100%;
  }
  #firstbox{
    background: red;
  }

  #second_box{
    background: blue;
  }

  #third_box{
    background: black;
  }

  .general{
    width: 100%;
    height: 100%;
  }

  header{
      width: 100%;
      height: 100%;
  }
  img{
      width: 100%;
      height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbox" class="general">
      <header><img src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here"></header>
  </div>
  <div id="second_box" class="general">

  </div>

  <div id="third_box" class="general">

  </div>

Answer 2

var sum = 0;
    $(window).on('wheel', function(e) {

        var delta = e.originalEvent.deltaY;
        
        if (delta > 0){
            sum++;
            console.log("going down");
            console.log(sum);

        } else {
            sum--;
            console.log("going up");
            console.log(sum);
        }
        return false;
    });

html,
  body{
    height: 100%;
  }
  #firstbox{
    background: red;
  }

  #second_box{
    background: blue;
  }

  #third_box{
    background: black;
  }

  .general{
    width: 100%;
    height: 100%;
  }

  header{
      width: 100%;
      height: 100%;
  }
  img{
      width: 100%;
      height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbox" class="general">
      <header><img src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here"></header>
  </div>
  <div id="second_box" class="general">

  </div>

  <div id="third_box" class="general">

  </div>

globally declaring value of sum will solve your problem more more scope related thing go through the following link https://www.geeksforgeeks.org/understanding-variable-scopes-in-javascript/