js/jq如何实现当网页滚动到指定区域执行一些事件

发布于
2022-05-01

需求先看图

当滚动条滚动一定区域后, 会发现上面的导航栏样式也变了
这个功能是如何实现的?

像这样, 我有一个页面
目前这个div的高度是1000vh
现在想实现的功能是
当滚动条滚动到200vh的位置时候
执行一遍console.log("test")即可
使用jquery或原生js都行, 如果jquery可以实现的话更好, 谢谢!


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div style="height: 1000vh;"></div>
    </body>
</html>

html javascript jquery

阅读 2.5k

2 个回答

唯一丶

✓ 已被采纳

// vh2px 
const vh = Math.floor(window.innerHeight / 100)
var once = false;

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

    if(window.scrollY >= vh * 200){
        once = true;
        // TODO
    }
})

// js
window.addEventListener('scroll', function(){
    if(once){
        return;
    }
    if(window.scrollY >= vh * 200){
        once = true;
        // TODO
    }
})