html - 在没有 jquery 的情况下在滚动条上切换标题内容

Question

是否可以在滚动并到达不同的容器时切换标题？我只找到了固定高度的解决方案，但没有找到针对个别高度的动态解决方案。

三个或更多的标题；

<a href="#home" class="w3-bar-item w3-button">Apple </a>

<a href="#home" class="w3-bar-item w3-button">Banana </a>

<a href="#home" class="w3-bar-item w3-button ">Stone </a>

还有不同的容器。因此，当向下滚动并到达 Apple 容器时，它应该在标题中显示 apple 等...

    <div class=" w3-center" id="Apple">
        blablablablablablablablablablablabla
    </div>


   <div class=" w3-center" id="Banana">
       blablabllablablablablablablablablablablabla
       lablablablablablablablablablablabl
       aablablablablablablablablabla
    </div>

   <div class=" w3-center" id="stone">
       blablablablablablablablablablablablablablablablalablab
       lablablablablablablablablablalablablablablablablablabla
       blablablalablablablablablablablablabl
       ablablalablablablablablablablablablablabl
       alablablablablablablabla
  </div>

Answer 1

我不是 100% 确定我确切地知道你想要什么，但我想你是在说当你向下滚动页面到“苹果”、“香蕉”和“石头”元素时，你想要那些元素是否在要在标题中表示的视口(viewport)中，全部使用 vanilla js(不是 jquery)？

如果是这种情况，您需要做三件事:

1. 获取要检查的元素
2. 滚动时检查元素是否在视口(viewport)中
3. 用视口(viewport) ID 名称中的元素替换当前标题文本

为了检查一个元素是否在视口(viewport)中，我会在窗口上设置一个滚动事件，然后在滚动事件监听器内部用你想要检查的元素调用这个函数，它应该看起来像这样:

window.addEventListener('scroll', function() {
    // returns a boolean value if the el is visible or not
    // in this case we test to see if the top of el is greater than 0px
    // and the bottom of the el is less than 1000px - you can adjust this
    // elem is the element to check;
    function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
      bounding.top >= 0 &&
      bounding.bottom <= 1000
    );
};

此函数将根据元素是否在视口(viewport)中返回 true 或 false 值，并且基于此您可以运行 js 函数来更改 innerHTML 值以匹配传递给 isInViewport 的元素的 id ()

此处归功于 isInViewport 函数:https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/