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

Question

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

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

默认情况下，按钮的文本是白色的，因为第一个div的背景颜色是黑色。第二和第三种颜色是白色的，所以我希望按钮文本的颜色在滚动到第二个div顶部时变为黑色。我已经设法实现了如果其他，但高度是固定的，所以当它在移动设备上，结果是不同的，因为高度的div都是100%全屏。我把我的代码改为：

$(document).ready(function() {
        var button = $(".sec-1");
        var offset = button.offset();
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= offset) {
                    $(".menu-button").css("color","black");
                } else {
                    $(".menu-button").css("color","white");

                }
            });
        });
});

目前我运气不佳，我很难找到一个例子供参考，所以如果有人能帮助我或指出正确的方向，我将非常感激。

Answer 1

.offset()

.offset()返回一个包含顶部和左侧属性的对象。

您应该检查.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");

                }
            });
        });
});