Выполните действие в JavaScript, когда идентификатор достигнет верхней части окна просмотра браузера.

Question

Я работаю над созданием кнопки, которая отправляет клиента в поле обзора в Woocommerce с помощью функции scrollIntoView() в Javascript.

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

Вот основы c HTML:

<button onClick="scrollToComment()" id="scroll-btn">Leave a Review</button>

<div id="reviews">

  //a bunch of reviews and comments go here

  <div id="review_form"></div>

</div>

Вот JS:

window.addEventListener('scroll', function() {
    var element = document.querySelector('#reviews');
    var position = element.getBoundingClientRect();
    var scrollBtn = document.querySelector('#scroll-btn');

     if(position.top < window.innerHeight && position.bottom >= 0) {

        scrollBtn.style.display = 'block';
    }

    else {

        scrollBtn.style.display = 'none';

    }
});


function scrollToComment() {
    var button = document.querySelector('#review_form');
    button.scrollIntoView();

}

Буду признателен за любую помощь!

Answer 1

Почему бы вам просто не проверить положение рамки, когда она достигает вершины?

// if position.top is between -1 and 1 it means it's on top
// don't use '=== 0' to avoid pixel perfect glitches
if (position.top > -1 && position.top < 1) {
  scrollBtn.style.display = 'block';
}

Answer 2

Использование IntersectionObserver .

var observer = new IntersectionObserver(callback, options);