Как удалить текст, когда он достигает точки деления, используя JQuery

Question

В настоящее время у меня есть этот код. В тот момент, когда текст загружен, добавляется больше текста на 200 пикселей.

$(function() {
  var text = $(".text");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 200) {
      text.removeClass("hidden");
    } else {
      text.addClass("hidden");
    }
  });
});

Какой код Jquery мне нужен, чтобы полностью скрыть весь этот текст, когда был достигнут div с именем homeIm2 при прокрутке?

<ul class="text hidden">
        <li>S</li>
        <li class="ghost">e</li>


        <li class="spaced">E</li>
        <li class="ghost">n</li>
        <li class="ghost">v</li>

        <li class="spaced">F</li>
        <li class="ghost">i</li>


        <li class="spaced">A</li>

    </ul>

    <div class="homeInfo1">
        {{ page.intro|richtext }}
    </div>

    <table class="overview">
        <tr>
            <td>
                ...
            </td>
            <td>
               ...
            </td>
        </tr>
        <tr>
            <td>
                <!--div for image of environment-->
                <div class="homeIm2">
                    {{ page.environmentImage|richtext }}
                </div>
            </td>

В настоящее время, когда скрыто, набирается в классе текстто есть дисплей SE ENV FI A

Answer 1

Вы можете использовать

$(function() {
  var text = $(".text");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 200) {
      text.show();
    } else {
   text.hide();
   }
   if(scroll > $('.homeIm2').offset().top) { // when the div with homeIm2 class scrolls into view
         //add logic here to hide necessary text
   } 
  });
});

, а затем скрыть, используя класс выше