Javascript jQuery根据滚动位置更改元素的css

我有一个带有固定菜单按钮的单页网站，该网站有多个部分：

<div class="fullscreen sec-1"></div>
<div class="fullscreen sec-2"></div>
<div class="fullscreen sec-3"></div>

目前我运气不佳，我正在努力寻找一个可供参考的例子，如果有人能帮助我或为我指出正确的方向，我将不胜感激。

.offset（）返回包含属性top和left的对象

您应该检查

.sec-2

而不是

.sec-1

试试像这样的东西

$(document).ready(function() {
        var button = $(".sec-2"); //get offset of second div
        var offset = button.offset().top; //check for top property
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= offset) {
                    $(".menu-button").css("color","black");
                } else {
                    $(".menu-button").css("color","white");

                }
            });
        });
});

---

我认为最好提供一个简单的现场演示。添加一些html和css。我觉得这有点不清楚。试着创建一个模型，这样我们就可以看到实际的问题。谢谢。缺少的“顶部”和第二个div的偏移量是正确的。

$(document).ready(function() {
        var button = $(".sec-2"); //get offset of second div
        var offset = button.offset().top; //check for top property
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= offset) {
                    $(".menu-button").css("color","black");
                } else {
                    $(".menu-button").css("color","white");

                }
            });
        });
});