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

大家好，我们又见面了啊~本文《如何使用 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 变量用于确保事件只执行一次。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~