Как я могу сделать несколько window.onscrolls

Question

Что происходит, так это то, что ракета поворачивается, а фон делает что-то, когда пользователь прокручивает вниз 50 пикселей. Как я могу сделать так, чтобы ракета делала что-то еще, когда пользователь прокручивает вниз 100 пикселей?

вот мой код

<script>
      window.onscroll = function() {

        var scrollamount = document.body.scrollTop;
        var otherscrollamount = document.documentElement.scrollTop;
        var rocket = document.getElementById("rocketship");
        var backgroundone = document.getElementById("one");
        var backgroundtwo = document.getElementById("two");

        if (scrollamount > 50 || otherscrollamount > 50) {
          rocket.setAttribute("style", "transform: rotate(90deg); animation: turn1 1s;");
          backgroundone.setAttribute("style", "opacity: 0; animation: fade2 1s;");
        }

        else if (scrollamount < 50 || otherscrollamount < 50) {
          rocket.setAttribute("style", "transform: rotate(0deg); animation: turn2 1s;");
          backgroundone.setAttribute("style", "opacity: 1; animation: fade1 1s;");
        }

        else if (scrollamount < 100 || otherscrollamount < 100) {
          // other stuff
        }

        else if (scrollamount > 100 || otherscrollamount > 100) {
          //other stuff
        }
      }
    </script>

Answer 1

Вам просто нужно проверить свои условия, чтобы убедиться, что их порядок неправильный:

    if (scrollamount > 50 || otherscrollamount > 50) {
        // This wil execute even if scroll value is greater than 100
        // Last condition will never be evaluated
    }
    else if (scrollamount < 50 || otherscrollamount < 50) {
        // This will execute only if the first condition returned false and scroll value != 50
    }
    else if (scrollamount < 100 || otherscrollamount < 100) {
      // This will execute only if scroll value == 50
    }
    else if (scrollamount > 100 || otherscrollamount > 100) {
      // This won't execute, because previous conditions covered all possible values
    }

Измените свои условия следующим образом:

// If you need greater scroll, add condition above this one
// Evaluate first greater than
if (scrollamount > 100 || otherscrollamount > 100) {

}
else if (scrollamount > 50 || otherscrollamount > 50) {
    // Below condition not needed, scroll value is between 51 and 100
    // if (scrollamount < 100 || otherscrollamount < 100)
}
else {
    // Below condition not needed, unless you want to omit action if scroll == 50
    // if (scrollamount < 50 || otherscrollamount < 50)
}

Answer 2

Вы можете установить диапазоны значений, сказав scrollAmount >= 50 && scrollAmount < 100, чтобы максимально контролировать, когда что должно произойти. Таким образом, вы можете создать начальное и конечное значение, когда что-то делать.

Элемент document.body не всегда изменяется. Вместо этого проверьте значение document.scrollingElement.scrollTop или, как вы уже делаете, document.documentElement.scrollTop в качестве запасного варианта.

Поместите селекторы элементов за пределы функции onscroll, поскольку эти элементы нужно выбрать только один раз . Это приведет к той же производительности.

Измените значения свойств className элементов, чтобы установить класс вместо установки встроенных стилей. Хотя установка встроенных стилей не является неправильной, это, безусловно, может помочь разделить ваши CSS и JavaScript, если вам нужно отредактировать стили или скрипты.

var rocket = document.getElementById("rocketship");
var backgroundone = document.getElementById("one");
var backgroundtwo = document.getElementById("two");

window.onscroll = function() {

  var scrollamount = document.scrollingElement.scrollTop || document.documentElement.scrollTop;

  if (scrollAmount < 50) {
    rocket.className = 'rocket-stage-1';
    backgroundone.className = 'background-stage-1';
  } else if (scrollamount >= 50 && scrollamount < 100) {
    rocket.className = 'rocket-stage-2';
    backgroundone.className = 'background-stage-2';
  } else if (scrollamount >= 100 && scrollamount < 150) {
    // other stuff
  }

}

.rocket-stage-1 {
  transform: rotate(0deg); 
  animation: turn2 1s;
}

.background-stage-1 {
  opacity: 1; 
  animation: fade1 1s;
}

.rocket-stage-2 {
  transform: rotate(90deg);
  animation: animation: turn1 1s;
}

.background-stage-2 {
  opacity: 0; 
  animation: fade2 1s;
}

Answer 3

Не очень ясно, какие именно условия вы хотите проверить, но я думаю, вы хотите сделать это следующим образом:

if (scrollamount > 100 || otherscrollamount > 100) {
  // Scrolled > 100
} else if (scrollamount > 50 || otherscrollamount > 50) {
  // Scrolled 51-100
} else {
  // Scrolled 1-50
}