时间戳

首页 > 解决方案 > 当div位于父div顶部时的javascript触发事件

javascript - 当div位于父div顶部时的javascript触发事件

问题描述

当 ID 到达父 div 的顶部时，我想用 vanilla javascript 触发一个事件。已经看到使用 jQuery 进行此类操作的示例，但我不想为简单的效果加载那么多。另外，大多数示例都处理视口的顶部，而我的主 div 大约是视口高度的 90%，上面有一个 info div。

我正在处理一个长网页，有几个部分，在主 div 中滚动。当每个部分的标题<h2 id="title1">bla bla bla</h2>到达主 div 的顶部时，我想触发<div id="info1">bla bla bla</div>info div 中显示的标题的简单显示/隐藏。显示/隐藏很简单：

 function chngInfo(x) {
    const targets = document.querySelectorAll('[id^="info"]');
    for (let i = targets.length; i--;) {
      targets[i].style.display = 'none';
    }
    document.getElementById('info' + x).style.display = 'block';
  }

它触发了让我受阻的功能。另一个复杂因素是主 div 的高度因设备而异，因此不能轻易地根据视口高度进行公式计算。

如果单个函数可以在向下滚动时通过顶部或在向上滚动时通过底部时查找任何 titleX，这将是主要的好处。

标签： javascriptcssscroll

解决方案

对需求不是很清楚。我想你可以试试

  1. getBoundingClientRect决定显示哪些内容
  2. 检测滚动停止事件，仅供参考

希望有帮助，谢谢。

function entry() {
  // 1. detect the main bound
  const mainRect = document.querySelector('#main').getBoundingClientRect();
  console.log('main', mainRect.y);

  // 2. get all the title
  const titles = document.querySelectorAll('h2');
  // hideAll
  titles.forEach(t => {
    t.nextElementSibling.style.display = 'none';
  });
  const first = Array.from(titles).find((t, i) => {
    const rect = t.getBoundingClientRect();
    rect.y > 0 && console.log('show', i);
    return rect.y > 0;
  });
  window.t = first;
  first.nextElementSibling.style.display = 'block';

}

var timer = null;
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);
    }
    timer = setTimeout(entry, 150);
}, false);


// init show;
entry();
<html>
<style>
  #main {
    background: green;
    height: 1800px;
  }
  #info1 {
    display: none;
  }
  h2 {
    height: 150px;
  }
  div {
    height: 500px;
    background: red;
  }
</style>
  <body>
    <div id="main">
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    <h2 id="title1">bla bla bla</h2>
    <div id="info1">bla bla bla</div>
    </div>
  </body>
</html>

推荐阅读