小编Ser*_*nov的帖子

如何使用 Intersection Observer API 获取所有条目?

我想让左侧导航显示当前可见部分。但是我的部分有不同的高度,我不知道如何正确跟踪它们。

如果每次调用我的回调函数都可以看到所有条目及其状态,但它会获取与阈值匹配的条目,那就更好了。

我可能错过了一些东西。应该有一种方法可以使这个工作。

这是我的 jsBin https://jsbin.com/homibef/edit?html,css,js,output

stickybits('#sticky', { stickyBitStickyOffset: 0 });

if (window.IntersectionObserver) {

      const callback = function(entries) {
			
        // Find all visible and then with biggest intersectionRatio
        let currentNav = null;
        const visibleEntries = entries.filter(entry => entry.isIntersecting);
        if ( Array.isArray(visibleEntries) && visibleEntries.length > 0 ) {
          currentNav = visibleEntries.reduce((prev, current) => {
            return (prev.intersectionRatio > current.intersectionRatio) ? prev : current;
          });
        } else {
          currentNav = visibleEntries;
        }

        if (currentNav.target) {
					// Handle navigation change
          const wasCurrent = document.querySelector('.navItem.isCurrent'); …
Run Code Online (Sandbox Code Playgroud)

javascript intersection-observer

6
推荐指数
1
解决办法
1630
查看次数

标签 统计

intersection-observer ×1

javascript ×1