如何在 JavaScript/jQuery 中实现页面滚动到指定区域时触发事件
问题：
当网页滚动到指定区域时，如何执行特定的事件？例如，让导航栏样式发生改变。
解决方案：
方法 1：jQuery
$(window).on('scroll', function(){
// 计算当前滚动条位置
var scrollTop = $(window).scrollTop();
// 当滚动条滚动到指定区域时（例如 200 个视口高度）
if(scrollTop >= (vh * 200)) {
// 执行事件（例如打印 "test" 到控制台）
console.log("test");
}
});方法 2：原生 JavaScript
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('scroll', function(){
// 计算当前滚动条位置
var scrollTop = window.scrollY;
// 当滚动条滚动到指定区域时（例如 200 个视口高度）
if(scrollTop >= (vh * 200)) {
// vh2px
const vh = Math.floor(window.innerHeight / 100);
// 执行事件（例如打印 "test" 到控制台）
console.log("test");
}
});注意：
- vh 表示视口高度，可以使用 const vh = Math.floor(window.innerHeight / 100) 计算。
- once 变量用于确保事件只执行一次。
