Javascript 根据使用交叉点观察者滚动到视图中的元素的数据属性更改导航栏的主题

我有一个固定的侧边导航栏，默认情况下，它是一个深色，与我页面最上面的元素标题的深色相匹配

这个黑色标题下面的下一部分是白色背景，当它以50%的偏移量滚动到视图中时，我想将固定的左侧导航栏更改为相同的颜色。当向上滚动时，侧面导航也必须相应地更改

我曾经使用一个名为：

然而，我试图构建这个新项目，而不使用任何依赖项。因此，我决定使用Javascript的本机来尝试并实现相同的效果，因为我对浏览器支持这个和其他一些视觉效果没有意见

我很难找到一个可以上下滚动的工作版本。我还有一个问题，在页面加载时，我将两个部分主题名称输出到JS控制台，这一点都不理想

这就是我要做的：

Javascript:

var intersection_observer_options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
};

var observer = new IntersectionObserver(change_themes_on_view, intersection_observer_options);

function change_themes_on_view(entries, observer) {
    for (var i = 0; i < entries.length; i++) {
        var theme = entries[i].target.getAttribute('data-theme');
        console.log(theme);
    }
}

var themed_sections = document.querySelectorAll('*[data-theme]');
for (var i = 0; i < themed_sections.length; i++) {
    observer.observe(themed_sections[i]);
}

为了帮助你帮助我，我已经制定了一个计划来帮助这项工作

有人知道这个新的交叉口观察者API，能帮我跨过这个门槛吗？请原谅我的双关语

更新1

。还在修补

更新2

是的

---

我将添加我自己的答案，因为我相信其他人会发现这很有用，而不是删除这个问题。

我自己修复了它，令人惊讶的是，它并不遥远

为了解决这两个问题—为什么它在控制台中输出所有主题而不考虑滚动方向—我只是将此条件语句添加到我的

change_themes_on_view

函数中：

if (entries[i].intersectionRatio > 0) {
    // do stuff now entry is in viewport
}

function change_themes_on_view(entries, observer) {
  for (var i = 0; i < entries.length; i++) {
    if (entries[i].intersectionRatio > 0) {
      var theme = entries[i].target.getAttribute('data-theme');
      nav_bar.setAttribute('data-theme', theme);
    }
  }
}

测试目标元素/条目是否在视口中

这显然修复了将页面加载时的所有目标主题值输出到我的控制台的脚本。它现在也尊重方向，因为当目标元素离开视口时，主题会反转

这就是全部功能：

if (entries[i].intersectionRatio > 0) {
    // do stuff now entry is in viewport
}

function change_themes_on_view(entries, observer) {
  for (var i = 0; i < entries.length; i++) {
    if (entries[i].intersectionRatio > 0) {
      var theme = entries[i].target.getAttribute('data-theme');
      nav_bar.setAttribute('data-theme', theme);
    }
  }
}

视图上的功能更改主题（条目、观察者）{ 对于（变量i=0；i0）{ var-theme=entries[i].target.getAttribute（'data-theme'）； 导航栏.setAttribute（'数据主题'，主题）； } } }

---

我自己修好了，出人意料的是不远就修好了

为了解决这两个问题—为什么它在控制台中输出所有主题而不考虑滚动方向—我只是将此条件语句添加到我的

change_themes_on_view

函数中：

if (entries[i].intersectionRatio > 0) {
    // do stuff now entry is in viewport
}

function change_themes_on_view(entries, observer) {
  for (var i = 0; i < entries.length; i++) {
    if (entries[i].intersectionRatio > 0) {
      var theme = entries[i].target.getAttribute('data-theme');
      nav_bar.setAttribute('data-theme', theme);
    }
  }
}

测试目标元素/条目是否在视口中

这显然修复了将页面加载时的所有目标主题值输出到我的控制台的脚本。它现在也尊重方向，因为当目标元素离开视口时，主题会反转

这就是全部功能：

if (entries[i].intersectionRatio > 0) {
    // do stuff now entry is in viewport
}

function change_themes_on_view(entries, observer) {
  for (var i = 0; i < entries.length; i++) {
    if (entries[i].intersectionRatio > 0) {
      var theme = entries[i].target.getAttribute('data-theme');
      nav_bar.setAttribute('data-theme', theme);
    }
  }
}

视图上的功能更改主题（条目、观察者）{ 对于（变量i=0；i0）{ var-theme=entries[i].target.getAttribute（'data-theme'）； 导航栏.setAttribute（'数据主题'，主题）； } } }