javascript - 根据滚动位置显示消息

Question

我正在尝试创建一个页面，其中屏幕右下角有一个头像，当用户滚动经过页面上的某些元素时，头像会弹出一个弹出窗口，根据以下内容提供一些简短的用户反馈他正在通过的点。

我不知道解决这个问题的最佳方法，我认为滚动点上会附加一个 ID，当该点滚动经过工具提示或某些内容时，会出现一小段时间，直到用户滚动过去所述 ID。

任何帮助将不胜感激

Answer 1

它通过滚动页面中的各个部分 (.section) 并识别哪个部分在视口(viewport)上可见来更改 #message 的内容。完整代码如下链接:

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() 函数:

https://stackoverflow.com/a/125106/5862990