使用 JS 在滚动事件上触发引导模式

Question

我正试图在滚动事件上触发引导模式。我设置了一些 JS 来添加我看到的类，当我用一个按钮触发模态时，我认为通过简单地添加类然后模态将被切换，但它不起作用。滚动事件侦听器正在工作，它正在添加也将通过使用按钮添加的类。但是有一个缺失的部分，我不确定它是什么。我编写了这个 JS 来激活类：

const scrollModal = document.getElementById('scroll-modal'); // My Modal
const btn1 = document.getElementById('btn1'); // A button to test the click event

const showModal = function() {
       let y = window.scrollY;
    if (y >= 800)  {
        scrollModal.classList.add('show');
        document.body.classList.add('modal-open');
    } else {
        scrollModal.className = 'modal';
        document.body.classList = '';
    }
}

window.addEventListener('scroll', showModal);

我直接使用 BS 文档中的 HTML：

<button id="btn1" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scroll-modal">
    Launch demo modal
  </button>

  <div id="scroll-modal" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>