js监听元素实现滑动一定距离后修改背景色

js监听元素实现滑动一定距离后修改背景色

   <script>
      // 获取需要观察的元素class名
const wrapper = document.querySelector('.wrapper');

// 创建一个新的 Intersection Observer
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        // 如果wrapper进入视窗内
        if (entry.isIntersecting) {
            // 添加滚动事件监听器
            window.addEventListener('scroll', () => {
                // 如果滚动超过200像素，则添加背景色，否则移除背景色
                if (window.scrollY > 300) {
                    wrapper.style.backgroundColor = 'white';
                } else {
                    wrapper.style.backgroundColor = '';
                }
            });
        } else {
            // 如果wrapper离开视窗，移除背景色并移除滚动事件监听器
            wrapper.style.backgroundColor = '';
            window.removeEventListener('scroll');
        }
    });
}, {
    threshold: 0 // 不设置阈值，直接通过进入视窗来触发
});

// 开始观察wrapper元素
observer.observe(wrapper);

</script>