页面滚动,动态高亮Menu
需求说明:
UI分为两部分
Menu | 文本内容(一整个dom块) |
---|---|
菜单1 | 内容模块1 |
菜单2 | 内容模块2 |
菜单3 | 内容模块3 |
Menu中每一项都对应着文本内容的一个模块,需要实现两个功能:
- 点击menu 跳转到对应模块
- 滚动文本内容,阅读的文本模块需要在menu中高亮对应的条目
原理:主要针对文本内容滚动,菜单动态高亮问题
确定正在阅读文本块:需要文本内容阅读块在距离屏幕最上端开始,在文本块的最下端移动到屏幕最上端结束。
- 利用dom的 getBoundingClientRect() 得到模块的top,bottom值判断正在阅读文本块
- let num = 文本块距离屏幕上边缘多少时属于正在阅读
- 判断条件 top <= num && bottom > 0, 获取这个模块的‘标记’
- 进而通过‘标记’,对菜单高亮。
操作:
// 滚动到目标文本块
menuClickEvent () {}
// 监听页面滚动
window.addEventListener('scroll', () => {
// 根据正在阅读文本块,找到并高亮菜单
highlightTargetMenu()
})