NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • JavaScript笔记

    • ajax如何解决跨域问题
    • async与await语法
    • Axios 文件下载实现进度条功能
    • Axios 的各种请求方式及传参格式总结
    • axios简单使用
    • CommonJS与ES6 Module的导入与导出之间的区别
    • ES6 中 export,export default 和 import 区别及用法
    • Javascript - 如何循环遍历getElementsByClassName返回的所有DOM元素
    • JavaScript 实现 charts 缩放比例尺
    • javaScript 实现将文件流下载文件保存到本地
    • JavaScript 数组对象去重方法
    • JavaScript 生成 uuid
    • JavaScript 解析 get 请求 url 参成对象
    • JavaScript判断字符串中是否包含某个字符串
    • JavaScript判断是否为移动端浏览器
    • JavaScript复制内容到剪贴板的两种常用方法
    • JavaScript实现单词首字母大写的方法总汇
    • JavaScript对时间(time)、日期(date)格式转换
    • JavaScript数组去重方法总结
    • JavaScript数组类型(Array)操作方法汇总
    • JavaScript浅度和深度复制的实现方法
    • js 中的 ES5 面向对象
    • js 中的 ES6 面向对象
    • js 中的 new 命令原理
    • js 实现 iframe通信
    • js 实现将文本复制到粘贴板
    • js 异步操作
    • js 数组转为树形(tree)结构
    • js 文件分片上传
    • js 统计数组中元素的重复次数
    • JS 选中文本输入框的部分文本内容
    • js 面向对象总结
    • Js中的forEach()、map()、$.each()和$.map()之间异同
    • js中的多种数组去重性能对比总结
    • js判断移动端还是pc端
    • JS如何监听div的resize事件
    • js实现格式化JSON数据方法
    • js实现防抖与节流函数
    • Js将滚动条(scrollbar)保持在最底部的方法
    • JS异步编程进化之路
    • JS数组改变元素位置(互换、置顶、上移、下移)
    • js数组的简单使用
    • js文件单位大小转换
    • JS获取和修改url参数
    • JS获取浏览器信息
    • js获取浏览器可视区或页面大小的兼容性总结
    • JS读取本地文本文件(兼容各种浏览器)
    • js随机打乱数组
    • Promise 中的 async 与 await 特点
    • Promise封装请求
    • qs.stringify 的基本用法
    • Web worker 使用方法
    • window.open之浏览器新窗口打开
    • 使用 js 实现保存 .tree 文件到本地
    • 使用 JS 将数字转化成千分位
    • 使用 js 快速计算文件 hash 值
    • 使用 js 进行Base64编码、解码(js-base64)
    • 使用 setTimeout 解决 setInterval 计时器不准的问题
    • 使用js在树形(tree)结构中找到子节点的父级路径
    • 使用JS如何判断远程网络图片地址是否失效
    • 使用js操作浏览器cookie的设置,读取,删除
    • 使用JS解决PC端页面适配方案
    • 使用js递归生成树形结构
    • 使用原生js(input type = file)上传图片(Base64)限制大小、类型判断、像素判断
    • 关于JavaScript 数组的复制解析总结
    • 关于JavaScript数组方法使用总结
    • 内置对象
    • 前端 DOM 总结
    • 前端 js 基础总结
    • 前端使用 jszip 解压 .zip 文件获取 file 格式文件
    • 前端各种事件总结
    • 前端常用的JS(代码片段)小工具方法总结
    • 前端登录界面常用的JS小工具方法总结
    • 十六(16)进制与rgb颜色转换
    • 原生 JavaScript 实现 div 随意拖拽原生 JavaScript 实现 div 随意拖拽
    • 原生 JS 实现页面树形(tree)菜单展示功能
    • 原生js实现 table表格列宽拖拽
    • 原生js获取iframe中dom元素或父级元素
    • 如何使用 file-saver 导出文件到本地?
    • 如何使用js将目录路径list转成tree树结构
    • 实现对localStorage、sessionStorage高级封装
    • 将一维数组按指定长度转为二维数组
    • 将网站设为主页以及加入收藏功能实现方法
    • 总结 3 种 HTML 转 PDF 导出的方案
    • 比typeof运算符更准确的js类型判断
    • 浏览器模型
    • 监听滚动条事件-返回顶部的方法
    • 简析JavaScript中的事件委托问题
    • 返回顶部的通用Js方法
    • 非常实用的Js代码工具片段
    • JS_根据鼠标位置缩放元素、拖拽
    • js_登录验证码绘制
    • JS-以鼠标位置为中心的滑轮缩放-图片
    • js生成目录并实现目录节点跟随滚动高亮
      • 场景
      • 实现思虑
        • 获取所有标题,并生成大纲
        • 给每个目录节点绑定点击事件
        • 监听滚动时目录高亮节点
      • 完整代码
        • CSS
        • HTML
        • JS
    • 使用js实现标题跳转与复制实现方法
    • 使用原生js动态实现文件的上传功能
    • 使用原生js提取md中的图片信息
    • 3d-force-graph使用方法
    • js 前端(web)浏览器端读取文件目录
    • 原生js监听窗口大小变化
    • JS 中 Promise 用法(简要总结)
  • CSS笔记

  • HTML笔记

  • Canvas笔记

  • Nuxt笔记

  • React笔记

  • Vue笔记

  • TypeScript笔记

  • AI相关笔记

  • 开发文档
  • JavaScript笔记
NoteZ
2024-02-20
目录

js生成目录并实现目录节点跟随滚动高亮

# 场景

当网页有文章,文章中有很多标题。我们有时会需要生成目录大纲,以便他人查阅。生成目录到是不难,但是怎么实现目录跟随着页面滚动而改变目录的高亮标题?


# 实现思虑

# 获取所有标题,并生成大纲

// 获取所有标题
let tocList = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
let HList = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];

let str = `<div class="dir"><ul id="toc">`;
// 生成目录(你也可以更具自己需要生成一个对象也可以,我这里生成 html字符串)
Array.from(tocList,v => {
	const H = HList.indexOf(v.nodeName) + 1 || 1;  // 标题等级 1,2,3,4,5,6
    str += `<li class="li li-${H}">
    			<a href="javascript:void(0);" id="${v.id}" >${v.textContent}</a>
    		</li>\n`;
})
str += `</ul>`;
str += `<div class="sider"><span class="siderbar"><span></div></div>`;

// 添加 html 字符串到 页面
let toc = document.querySelector(".toc");
toc.insertAdjacentHTML("beforeend", str);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

生成节点大概如下:(如果是vue或react可以生成对象,在页面渲染成大概这样子就行)

在这里插入图片描述

# 给每个目录节点绑定点击事件

为什么不用瞄点定位?a 标签 #id 确实可以定位到该标题,但这个我个人觉得有点不好用,如果顶部有导航栏,瞄点定位的标题会被顶部导航栏遮挡住,为了不被遮挡,可以给每个标题都添加一个 padding-top 或 margin-top 隔开顶部导航栏,但我不想那么做。

Array.from(tocList,v => {
   const btn = document.querySelector(`#toc #${v.id}`);
   const ele = document.querySelector(`.container #${v.id}`);
   if (!btn || !ele) return;
  
	btn.addEventListener("click", () => {
      window.scrollTo({ top: ele.offsetTop - 80, behavior: "smooth" });
    })
})
1
2
3
4
5
6
7
8
9

# 监听滚动时目录高亮节点

这里不适用 scolll 来监听滚动,我这里用 observe 来监听

const visibleChnage = (obs) => {
  var sider = document.querySelector(".siderbar");
  var toc = document.querySelectorAll("#toc .li a");
  item.forEach(observe => {
    // 找到对应的节点
    const id = observe.target.getAttribute('id'), anchor = document.querySelector(`#toc .li #${id}`);

    if (!anchor) return false;
    
    // 如果节点出现在可视视窗
    if (observe.isIntersecting) {
      // 排他(这个为了清除所有a标签中的类名 li-active)
      removeClass(); 
      // 目录 a 标签的类名为 li-active 时高亮
      anchor.classList.add("li-active");
       const index = Array.from(toc, v => v.getAttribute('id')).indexOf(id);
      // 左边高亮目录条
      sider.style.transform = `translateY(${index * 30}px)`;
    }
  });
}


 const observer = new IntersectionObserver(visibleChnage);
 // 监听滚动
 Array.from(tocList).map(item => observer.observe(item));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

排他: removeClass()

// 移除所有的 li-active 排他
const removeClass = () => {
  const list = document.querySelectorAll("#toc .li a");
  Array.from(list,v => v.classList.remove("li-active"));
}
1
2
3
4
5

# 完整代码

# CSS

.container {
	width: 50%;
}

.toc {
	position: fixed;
	right: 2%;
	top: 80px;
	min-width: 300px;
}

.dir {
	position: relative;
	padding-bottom: 8px;
	box-sizing: border-box;
}

#toc {
	margin: 0;
	padding-left: 15px;
	box-sizing: border-box;
}

.sider {
	width: 2px;
	height: 100%;
	background: #eee;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 10px;
	margin: auto;
	bottom: 0;
}

.siderbar {
	display: flex;
	width: 100%;
	height: 20px;
	line-height: 2;
	background: #f36;
	transition: all 0.1s;
}

li {
	height: 30px;
	box-sizing: border-box;
	list-style: none;
}

a {
	color: #333;
	text-decoration: none;
	font-size: 14px;
}

.li-1 {
	padding-left: 0px;
}

.li-2 {
	padding-left: 8px;
}

.li-3 {
	padding-left: 16px;
}

.li-4 {
	padding-left: 24px;
}

.li-5 {
	padding-left: 32px;
}

.li-6 {
	padding-left: 40px;
}

.li-active {
	color: #f36;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

# HTML

<div class="container"></div>
<div class="toc"></div>
1
2

# JS

console.log("%c 自动生成目录 ", "color: #fff; background: #000;padding: 5px;");

window.addEventListener("load", () => tocList())

const tocList = () => {
  const toc = document.querySelector(".toc");
  const elements = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
  if (!elements.length) return;
  const HList = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
  // 生成目录
  let str = `<div class="dir">\n<ul id="toc">`;
  Array.from(elements, v => {
    const H = HList.indexOf(v.nodeName) + 1 || 1;
    str += `<li class="li li-${H}"><a href="javascript:void(0);" id="${v.id}" >${v.textContent}</a></li>\n`;
  })
  str += `</ul>\n`;
  str += `<div class="sider"><span class="siderbar"><span></div>\n</div>`;
  // 添加目录到页面
  toc.insertAdjacentHTML("beforeend", str);

  // 给目录添加点击事件
  Array.from(elements, v => {
    const btn = document.querySelector(`#toc #${v.id}`);
    const ele = document.querySelector(`.container #${v.id}`);
    if (!btn || !ele) return;
    btn.addEventListener("click", () => {
      window.scrollTo({ top: ele.offsetTop - 80, behavior: "smooth" });
    })
  })

  // 监听滚动
  const observer = new IntersectionObserver(visibleChnage,{rootMargin: "80px 0px 0px 0px"});
  Array.from(elements, item => observer.observe(item));
}


// 移除所有的 li-active 排他
const removeClass = () => {
  const list = document.querySelectorAll("#toc .li a");
  Array.from(list, v => v.classList.remove("li-active"));
}

// 监听滚动
const visibleChnage = (item) => {
  var sider = document.querySelector(".siderbar");
  var toc = document.querySelectorAll("#toc .li a");
  item.forEach(observe => {
    const id = observe.target.getAttribute('id'), anchor = document.querySelector(`#toc .li #${id}`);
    
    if (!anchor) return false;

    if (observe.isIntersecting) {
      removeClass();
      const index = Array.from(toc, v => v.getAttribute('id')).indexOf(id);
      anchor.classList.add("li-active");
      sider.style.transform = `translateY(${index * 30 + 10}px)`;
      return;
    }
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#JavaScript
上次更新: 2024/02/20, 17:31:36
JS-以鼠标位置为中心的滑轮缩放-图片
使用js实现标题跳转与复制实现方法

← JS-以鼠标位置为中心的滑轮缩放-图片 使用js实现标题跳转与复制实现方法→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式