Как изменить класс div после прокрутки в прошлом, а затем изменить его обратно на исходный при повторном выполнении одного и того же действия прокрутки?

Question

В моем html есть div, который меняет свой класс, когда пользователь прокручивает его (и div становится вне поля зрения), так что, когда пользователь прокручивает страницу вверх, класс изменяется.

Я хотел бы, чтобы класс div был возвращен к исходному во второй раз, когда пользователь прокручивает назад, но просто не может найти способ сделать это.Я пытаюсь найти способ, чтобы он работал таким образом, чтобы эффект повторялся, и класс чередовался каждый раз, когда он возвращается в поле зрения.

В настоящее время я делаю это с двумя сценариями.Первый работает и меняет класс div, когда пользователь прокручивает обратно:

<script>
  $(function() {
    var scroll1 = $(window).scrollTop();  // how many pixels have been scrolled
    var os1 = $('#div1').offset().top;  // pixels to top of div1
    var ht1 = $('#div1').height();  // height of div1 in pixels
    if (scroll > os1 + ht1) {
      $('#div1').removeClass('english').addClass('japanese');
    }
  });
</script>

Но второй, похоже, ничего не делает:

<script>
  $(function() {
    var scroll2 = $(window).scrollTop();
    var os2 = $('#div1').offset().top;
    var ht2 = $('#div1').height();
    var class1 = document.getElementsByClassName('japanese')[0].className;
    if (scroll > os1 + ht1 && class1 == 'japanese') {
      $('#div1').removeClass('japanese').addClass('english');
    }
  });
</script>

Answer 1

Полагаю, это происходит потому, что у вас одинаковые условия в обеих функциях. Для второго условия используйте это вместо

if(scroll < os1 + ht1)