← 全部示例

JavaScript 导航

滚动监视高亮当前区域

高亮与当前可见区域对应的目录链接。

可复制的代码

var heads = document.querySelectorAll('h2[id], h3[id]');
if (heads.length && 'IntersectionObserver' in window) {
  var obs = new IntersectionObserver(function (entries) {
    entries.forEach(function (en) {
      if (en.isIntersecting) {
        document.querySelectorAll('a[href^="#"]').forEach(function (a) {
          var on = a.getAttribute('href') === '#' + en.target.id;
          a.style.fontWeight = on ? '700' : '';
          a.style.background = on ? '#fff3a8' : '';
        });
      }
    });
  }, { rootMargin: '0px 0px -70% 0px' });
  heads.forEach(function (h) { obs.observe(h); });
}

如何使用此示例

  1. 用上方按钮复制代码。
  2. 安装 JustZix(2 分钟),在目标页面打开扩展。
  3. 添加一条匹配该页面的新规则。
  4. 将代码粘贴到规则的 JavaScript 面板并保存 — 每次访问页面时都会运行。

为此示例评分

暂无评分 — 成为第一个。

此示例有效吗?

没有可粘贴的地方,代码片段毫无用处。

JustZix 安装只需 2 分钟,并在每个匹配的页面上运行你的代码。无需账户、无需付费。

免费下载 查看应用场景