Gumshoe - 简单的JavaScript滚动监听器

Gumshoe - 简单的JavaScript滚动监听器

gumshoeA simple vanilla JS scrollspy script.项目地址:https://gitcode.com/gh_mirrors/gu/gumshoe

阅读原文：英文版README

项目简介

Gumshoe 是一个轻量级的JavaScript库，用于实现页面滚动时的导航高亮功能。它与Cferdinandi的Smooth Scroll配合得非常好，能让你的网站在用户滚动时动态更新导航菜单中的活动项。

查看CodePen上的演示 →

项目技术分析

Gumshoe 提供了两种版本：独立版和带有 closest() 和 CustomEvent() 这两个浏览器新特性补丁的版本。独立版适用于已经处理这些特性的场景，或者不打算支持旧版浏览器的情况。对于旧版浏览器，可以使用带补丁的版本。

Gumshoe 使用简单，无需复杂的配置，只需要通过JavaScript实例化对象，然后添加标记到HTML中，最后添加CSS样式即可。

应用场景

1. 导航菜单的滚动关联：当用户浏览网页时，导航菜单中的相应链接将被高亮显示。
2. 嵌套导航：Gumshoe 支持多级导航，可以为当前活动链接的父级元素也添加活动状态。
3. 页面布局变化：如果内容在不同屏幕尺寸下有不同的布局，Gumshoe 可以检测这些变化并自动调整。

项目特点

1. 兼容性：Gumshoe 兼容所有现代浏览器以及IE9以上版本。
2. API友好：提供了自定义事件、设置选项以及公共方法如setup()、detect()和destroy()，方便扩展和控制。
3. 可定制：你可以设定导航的激活类名、内容的激活类名，甚至可以处理嵌套导航和动态计算偏移值。
4. 轻量化：编译后的代码大小适中，适合任何规模的项目。

获取和启动

可以直接从GitHub下载源码，或通过CDN引入，也可以利用NPM安装。初始化 Gumshoe 非常简单，只需几行代码就能让滚动监听生效。对于更详细的指南，请参考项目文档。

开始你的滚动旅程，让Gumshoe为你的网页体验增色吧！

原项目链接

---

想了解更多如何编写自己的JavaScript插件的知识吗？请访问Vanilla JS Pocket Guides 或 加入Vanilla JS Academy，提升你的Web开发技能。🚀

gumshoeA simple vanilla JS scrollspy script.项目地址:https://gitcode.com/gh_mirrors/gu/gumshoe