如何使用 jQuery 和原生 JavaScript 实现网页滚动触发事件?

如何使用 jQuery 和原生 JavaScript 实现网页滚动触发事件?

网页滚动到指定区域触发事件

当用户滚动网页时,有时需要在特定区域触发某些事件。例如,当滚动到导航栏区域时更改导航栏样式。下面介绍两种实现方法,使用 jQuery 和原生 JavaScript

jQuery 方法

$(window).on('scroll', function() {
    if (window.scrollY >= vh * 200) {
        // 执行事件
    }
});

原生 JavaScript 方法

window.addEventListener('scroll', function() {
    if (window.scrollY >= vh * 200) {
        // 执行事件
    }
});

其中,vh 是窗口高度的百分之一,通过 Math.floor(window.innerHeight / 100) 计算得出。

在示例代码中,当滚动条滚动到页面高度的 200vh 时,将触发指定事件,可以是打印到控制台或执行其他操作。

以上就是如何使用 jQuery 和原生 JavaScript 实现网页滚动触发事件?的详细内容,更多请关注其它相关文章!