Отображение сообщений на основе позиции прокрутки

Question

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

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

Любая помощь будет высоко ценится

Answer 1

Изменяет содержимое #message, прокручивая разделы (.section) на странице и определяя, какой из них виден в области просмотра. Полный код по ссылке ниже:

https://jsfiddle.net/hw475zeL/

Разметка:

<div class="container">
  <h1>Custom message on scrolling</h1>
  <div id="section-1" class="section">
    <h2>Section 1</h2>
  </div>
  <div id="section-2" class="section">
    <h2>Section 2</h2>
  </div>
  <div id="section-3" class="section" data-message="Showing section 3">
    <h2>Section 3</h2>
  </div>
  <div id="section-4" class="section" data-message="Showing section 4">
    <h2>Section 4</h2>
  </div>
  <div id="section-5" class="section" data-message="Showing section 5">
    <h2>Section 5</h2>
  </div>
  <div id="section-6" class="section">
    <h2>Section 6</h2>
  </div>
</div>
<div id="message" style="visibility: hidden; opacity: 0;">Teste</div>

JavaScript:

var sections = document.querySelectorAll('.section');
var message = document.querySelector('#message');

document.onscroll = function(event) {
  for (var section of sections) {
    if (elementInViewport(section) && section.hasAttribute('data-message')) {
      message.innerText = section.getAttribute('data-message');
      message.style.visibility = 'visible';
      message.style.opacity = 1;
      break;
    }

    message.style.visibility = 'hidden';
    message.style.opacity = 0;
  }
}

И функция elementInViewport() из этого ответа:

{ ссылка }

Answer 2

Вы можете использовать список событий прокрутки.

// what should we do when scrolling occurs
var runOnScroll =  function(evt) {
  // not the most exciting thing, but a thing nonetheless
  console.log(evt.target);
};


// and then make each element do something on scroll
elements.forEach(function(element) {
  window.addEventListener("scroll", runOnScroll, {passive: true});
});

Answer 3

Если вы устанавливаете каждый элемент как строку, а затем используете

<div class="row" onmouseover="avatarscript">
<div class="row" onmouseover="avatarscript2">

в аватарах, используйте jquery или javascript, чтобы перейти к соответствующему тексту аватара.