时间戳

首页 > 解决方案 > 用于在粘性导航中显示活动航向的交叉点观察器

javascript - 用于在粘性导航中显示活动航向的交叉点观察器

问题描述

我不是开发人员，但我正在尝试找出一种方法来修复我的网站的粘性导航。我的问题是活动标题的样式在进入屏幕后立即应用，我想在它位于屏幕顶部（或前一个标题离开屏幕时）激活它。

我按照这里的教程在我的网站上实现了一个动态目录。

< script >
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute("id");
      if (entry.isIntersecting) {
        document.querySelectorAll(".active").forEach((z) => {
          z.classList.remove("active")
        });
        document.querySelector(`a[href="#${id}"]`).classList.add("active");
      }
    });
  }); <
/script> <
script >
  document.getElementById("content").querySelectorAll("h2,h3,h4").forEach(function(heading, i) { // runs a function for all headings inside your rich text element
    observer.observe(heading);
    heading.setAttribute("id", "toc-" + i); // gives each heading a unique id
    const item = document.createElement("a"); // creates an anchor element called "item" for each heading
    item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading
    ("h2,h3,h4").split(",").forEach(function(x) { // runs a function for each item in your headings list
      if (heading.tagName.toLowerCase() == x) {
        item.classList.add("tocitem", "toc-" + x); // gives each item the correct class
      }
    });
    item.setAttribute("href", "#toc-" + i); // gives each item the correct anchor link
    document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div
  }); <
/script>

我知道我正在链接到标题（非 IT 人员试图解码代码，请耐心等待）。

因此，如果航向可见，则相交比为 1，并且选择了活动状态。

所以我需要实际检查前一个标题何时离开屏幕，而不是尝试检查下一个标题何时出现在屏幕上。

或者也许我应该将所有内容设置为活动，当它不相交时，删除活动类。

我这辈子从来没有写过剧本，我只是花了两个小时尝试了一些东西。我在 webflow 论坛上尝试过，但无济于事。因为我不认为这是特定于 webflow 的问题，所以我想我会在这里问。

谢谢！

标签： javascriptcssintersection-observer

解决方案

我设法通过在代码中设置根边距来解决这个问题。

这是我使用的代码：

<script>
const options = {
    rootMargin: '0px 0px -80% 0px'
};
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const id = entry.target.getAttribute("id");
    if (entry.isIntersecting) {
      document.querySelectorAll(".active").forEach((z) => {
        z.classList.remove("active")
      });
      document.querySelector(`a[href="#${id}"]`).classList.add("active");
    }
  });
},options);
</script>
<script>
document.getElementById("content").querySelectorAll("h2,h3,h4").forEach(function(heading, i) { // runs a function for all headings inside your rich text element
  observer.observe(heading);
  heading.setAttribute("id", "toc-" + i); // gives each heading a unique id
  const item = document.createElement("a"); // creates an anchor element called "item" for each heading
  item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading
  ("h2,h3,h4").split(",").forEach(function(x) { // runs a function for each item in your headings list
    if (heading.tagName.toLowerCase()==x) {
      item.classList.add("tocitem", "toc-" + x); // gives each item the correct class
    }
  });
  item.setAttribute("href", "#toc-" + i); // gives each item the correct anchor link
  document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div
});
</script>

那很有趣，最终可能会学习如何编码！:D

推荐阅读