Есть ли способ использовать JS прослушиватели событий для запуска при прокрутке каждый раз, чтобы код работал и действовал соответствующим образом в зависимости от условий?

Question

Я работаю над веб-сайтом, где у меня есть изображение героя, которое проходит весь путь до браузера. Я встроил виджет Facebook Chat / Messenger. Я не хочу, чтобы он загружался поверх изображения героя. Поэтому я установил оператор if, чтобы виджет не загружался до тех пор, пока посетитель не пройдет мимо героя, а затем исчезнет, ​​если посетитель вернется к изображению героя. Что я не могу понять, так это как заставить виджет снова появляться, когда он прокручивается вниз за пределы героя. Я считаю, что слушатели событий - правильный способ сделать это, но я явно что-то упускаю. Я пробовал это о трех разных способах. Все три способа достигают sh цель (1) не загружать виджет на изображение героя, (2) загружать виджет после прокрутки за пределы героя / сгиба и (3) скрывать виджет, когда посетитель прокручивает обратно до образ героя. Ни один из них не достигает цели (4) повторного раскрытия виджета после того, как пользователь прокручивает назад за героя.

Это самые многообещающие способы, которые пытались достичь 3/4 целей. Добавление else в конце оператора нарушало код в каждом случае.

ONE ATTEMPT

<!-- Load Facebook SDK for JavaScript -->
<div id='fb-root'></div>
<script>
window.onscroll = function() {showMessenger()};

function showMessenger() {
  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  } else if (document.body.scrollTop < 400 || document.documentElement.scrollTop < 400){
  FB.CustomerChat.hide();
  }
}
</script>

      <!-- Your customer chat code -->
  <div class='fb-customerchat'
    attribution="wordpress"
    page_id='FACEBOOKPGID'
    theme_color='#000000'
    logged_in_greeting='Hey! How can I help?'
    logged_out_greeting='Hey! How can I help?'
  >
</div>

** ANOTHER ATTEMPT **

<div id='fb-root'></div>
<script>
window.addEventListener('scroll', function() {
    if(window.scrollY > 399) {
        (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
      } else {
      FB.CustomerChat.hide();
      }
});
</script>
  <div class='fb-customerchat'
    attribution="wordpress"
    page_id='___'
    theme_color='#000000'
    logged_in_greeting='Hey! How can I help?'
    logged_out_greeting='Hey! How can I help?'
  >
</div>

** ОРИГИНАЛЬНЫЙ ВСТРОЕННЫЙ КОД FB **

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v5.0'
          });
        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your customer chat code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="___"
  theme_color="#000000"
  logged_in_greeting="Hey! If there is anything I can help you with let me know."
  logged_out_greeting="Hey! If there is anything I can help you with let me know.">
      </div>