JS+jQuery滚动监听：精准触发特定区域操作详解

本文介绍如何使用JavaScript和jQuery监听页面滚动事件，并在滚动到特定区域（例如200vh）时执行指定操作，例如改变导航栏样式。文章提供两种解决方案：原生JavaScript和jQuery方法。核心思路是监听`window`对象的`scroll`事件，获取当前滚动距离`window.scrollY`，并与目标滚动距离进行比较，通过布尔变量`once`避免重复执行。两种方法的核心逻辑一致，只是事件监听方式不同，文章详细讲解了代码实现及vh单位转换为像素的计算方法，方便开发者快速上手实现页面滚动交互效果。

利用JS和jQuery实现页面滚动事件监听及特定区域触发操作

许多网站都运用页面滚动触发特定交互效果，例如导航栏样式变化。本文将详细介绍如何使用JavaScript和jQuery实现此功能。 假设需求是在页面滚动到200vh时，在控制台打印“test”。我们将提供基于原生JavaScript和jQuery的两种解决方案。

核心方法是监听window对象的scroll事件。该事件在页面滚动时触发，事件处理函数中获取当前滚动距离window.scrollY，并与目标滚动距离进行比较。为了避免重复触发，我们使用布尔变量once，确保操作只执行一次。

首先，需将vh单位转换为像素单位，以便与window.scrollY精确比较。代码中vh = Math.floor(window.innerHeight / 100)计算出视口高度的1%的像素值。

jQuery方案：

// vh转像素
const vh = Math.floor(window.innerHeight / 100);
let once = false;

$(window).on('scroll', function() {
    if (once) {
        return;
    }

    if (window.scrollY >= vh * 200) {
        once = true;
        console.log("test"); //  此处替换为实际操作代码
    }
});

这段jQuery代码使用$(window).on('scroll', ...)将scroll事件绑定到窗口对象。滚动事件触发时，代码检查window.scrollY是否大于等于200vh（已转换为像素）。如果条件满足且once为false，则执行console.log("test")，并设置once为true，防止重复执行。

原生JavaScript方案：

// vh转像素
const vh = Math.floor(window.innerHeight / 100);
let once = false;

window.addEventListener('scroll', function() {
    if (once) {
        return;
    }
    if (window.scrollY >= vh * 200) {
        once = true;
        console.log("test"); // 此处替换为实际操作代码
    }
});

这段原生JavaScript代码使用window.addEventListener('scroll', ...)监听scroll事件。其余逻辑与jQuery版本相同，只是使用了原生JavaScript的事件监听机制。console.log("test")仅为示例，实际应用中应替换为所需执行的代码，例如修改导航栏样式等。

终于介绍完啦！小伙伴们，这篇关于《JS+jQuery滚动监听：精准触发特定区域操作详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！