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

时间:2017-12-12 17:23:23

标签: javascript jquery html css

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

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

默认情况下,按钮的文本为白色,因为第一个div的背景颜色为黑色。第二个和第三个的颜色是白色,所以当滚动到达第二个div的顶部时,我希望按钮文本的颜色变为黑色。我已经设法用if if来实现这个,但是高度是固定的所以当它在移动设备上时结果是不同的,因为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");

                }
            });
        });
});

目前我没有运气,而且我很难找到一个可以参考的例子,如果有人能帮助我或者指出我正确的方向我会非常感激。

1 个答案:

答案 0 :(得分:1)

described here

  

.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");

                }
            });
        });
});