Как изменять rotate при скролле?

Question

[olchagmk]

Добрый вечер. Есть сайт.
alchagps.beget.tech/MNWeb
И есть проблема. Там стоит вот такой скрипт

var mob_head = document.getElementById("mob_head");
    $(window).scroll(function(){
        if ($(this).scrollTop() > $(".section_main").offset().top) {
            mob_head.style.transform = "rotate(-"+window.pageYOffset / 40 +"deg)";
        }
    });

Который отвечает за то, что-бы голова на планшетной версии (с 992px) на главном экране наклонялась при скролле вверх\вниз.
Вот в чём проблема: на сайте есть еще 2 головы, которые нужно так-же поворачивать доходя до их секции.
НО! "rotate(-"+window.pageYOffset / 40 +"deg)"; Данное свойство вращает их всегда и получается так, что когда я дохожу до нижней или средней секции, они уже чуть-ли не вверх ногами. Как это исправить?

Answer 1

[Aricus]

Создать переменную-метку, чтобы она позволяла вращаться только один раз.

let rotated = false;
if ($(this).scrollTop() > $(".section_main").offset().top && !rotated) {
    mob_head.style.transform = "rotate(-"+window.pageYOffset / 40 +"deg)";
    rotated = true;
}

Кроме того, нужно заменить id на класс (id может быть только один), и задать для каждого элемента свою метку в цикле .each