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％确定我确切知道您想要什么，但是我想您是说，当您向下滚动页面到“ apple”，“ banana”和“ stone”元素上时，您想要那些都在视口中要在标题中表示，都使用香草js（而非jquery）？

如果是这种情况，则需要做三件事：

获取要检查的元素
滚动时检查元素是否在视口中
将当前标题文本替换为视口ID名称中的元素

要检查某个元素是否在视口中，我将在窗口上设置一个滚动事件，然后在滚动事件侦听器内部使用您要检查的元素调用此函数，该函数应类似于以下内容：

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
    );
};

此函数将返回true或false值，具体取决于元素是否在视口中，然后您可以运行js函数来更改innerHTML值以匹配传递给isInViewport的元素的id （）

在此处登录isInViewport函数：https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/

在没有jquery的情况下滚动滚动标题内容

1 个答案: