如何使用 JavaScript/jQuery 实现页面滚动到指定区域时触发事件？

如何在 JavaScript/jQuery 中实现页面滚动到指定区域时触发事件

问题：

当网页滚动到指定区域时，如何执行特定的事件？例如，让导航栏样式发生改变。

解决方案：

方法 1：jQuery

$(window).on('scroll', function(){
    // 计算当前滚动条位置
    var scrollTop = $(window).scrollTop();

    // 当滚动条滚动到指定区域时（例如 200 个视口高度）
    if(scrollTop >= (vh * 200)) {
        // 执行事件（例如打印 "test" 到控制台）
        console.log("test");
    }
});

方法 2：原生 JavaScript

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 变量用于确保事件只执行一次。

以上就是如何使用 JavaScript/jQuery 实现页面滚动到指定区域时触发事件？的详细内容，更多请关注其它相关文章！