到达 div（锚点）时删除 css 类答案

【问题标题】：Remove css class when reached a div (anchor point)到达 div（锚点）时删除 css 类
【发布时间】：2021-05-24 19:50:41
【问题描述】：

当页面滚动到某个元素时（当该元素到达视口顶部时），我想从 div（我的标题）中删除一个类。

我这样做了：

var sh = $("#scrolledhero").offset().top;
    $(document).scroll(function () {
        if ($(window).height() + $(this).scrollTop() > sh) {
            $('header').removeClass('lightHeader');
        }
    });

在我的页面中，我添加了一个触发器：

<a id="#scrolledhero">Trigger</a>

我无法让它工作。你能帮助我吗？谢谢

【问题讨论】：

你能解释一下“滚动到一个元素”是什么意思吗？您是指该元素何时（部分、完全）在视口中，还是该元素已到达视口顶部？
我的意思是当触发元素到达视口的顶部时。
最后，我改用了 Intersection Observer 并且成功了。

标签： jquery css scroll

【解决方案1】：

不能 100% 确定您的具体情况。但是有一个插件可以在元素在视口中时触发一个函数。

你可以使用jquery的一个小插件。它的名字是WayPoint。通过使用它，您可以像这样调用您的函数。 [Way Point]

$(function() {
       $('#yourdiv').waypoint(function() {
         window.location.href = 'http://facebook.com'; || //do your thing
         }, {
           offset: '100%'
         });
    });

【讨论】：

你好。谢谢您的回答。我改用了 Intersection Observer。更简单地满足我的需要。

【解决方案2】：

我使用 Intersection Observer 进行了不同的操作，它可以工作：它检测我的 div 元素何时部分位于视口内。我不是最擅长的JS，所以也许可以简化一下。

var header = document.getElementById("test2");
    
    if ( header.classList.contains('lightHeader')) {
        function handler(entries, observer) {
            for (entry of entries) {
                if (entry.isIntersecting) {
                    if ( header.classList.contains('lightHeader')) {
                        // do nothing
                        } else {
                            header.classList.add("lightHeader");
                        }
                } else {
                    header.classList.remove("lightHeader");
                }
            }
        }
       let observer = new IntersectionObserver(handler);
       observer.observe(document.getElementById("findme"));     

}

【讨论】：