时间戳

首页 > 解决方案 > IntersectionObserver 是否在加载时弄乱了导航栏？

javascript - IntersectionObserver 是否在加载时弄乱了导航栏？

问题描述

怎么回事：

没有背景颜色是我想要的导航状态： https ://i.stack.imgur.com/mcc4A.png

但随机呈现深色背景： https ://i.stack.imgur.com/P0KGA.png

或者，也随机呈现白色背景颜色： https ://i.stack.imgur.com/0PgPt.png

我已经尝试实现 IntersectionObserver 来跟踪其中一个部分（折叠下方）中的 div 以在深色和浅色类之间切换

let observerSecTwoTop = new IntersectionObserver(entries => {
  if (entries[0].boundingClientRect.bottom < 0) {
    nav.classList.remove('solid__background__light');
    nav.classList.add('solid__background__dark');
    navMenuItem.forEach(e => e.classList.add('nav__links__dark'));
  } else if (entries[0].boundingClientRect.bottom > 0) {
    nav.classList.add('solid__background__light');
    nav.classList.remove('solid__background__dark');
    navMenuItem.forEach(e => e.classList.remove('nav__links__dark'));
  }
});

let observerSecTwoBottom = new IntersectionObserver(entries => {
  if (entries[0].boundingClientRect.bottom < 0) {
    nav.classList.add('solid__background__light');
    nav.classList.remove('solid__background__dark');
    navMenuItem.forEach(e => e.classList.remove('nav__links__dark'));
  } else if (entries[0].boundingClientRect.bottom > 0) {
    nav.classList.remove('solid__background__light');
    nav.classList.add('solid__background__dark');
    navMenuItem.forEach(e => e.classList.add('nav__links__dark'));
  }
});
observerSecTwoTop.observe(document.querySelector('#top--track'));
observerSecTwoBottom.observe(document.querySelector('#bottom--track'));

#top--track 和 #bottom--track 是我正在跟踪的两个 div，用于在滚动到页面中的特定点时切换导航栏颜色。

这是页面本身：https ://tombrewsviews.github.io/portfolio/

回购在此处公开：https ://github.com/tombrewsviews/portfolio 我感谢任何帮助或解释我在这里缺少什么

谢谢！

标签： javascript

解决方案

我通过添加额外的检查解决了这个问题，即观察者 isIntersecting 与 track 元素。我认为正在发生的事情，初始负载也被视为事件触发器并通过函数运行。

else if (
entries[0].boundingClientRect.bottom > 0 &&
entries[0].isIntersecting

推荐阅读