Question

我正在研究这个，我正在做的是我在滚动时改变某个位置的背景颜色。现在它工作正常，直到红色，但再次绿色没有出现。这是代码

    $(document).ready(function () {
        var scroll_pos = 0;
        $(document).scroll(function () {
            scroll_pos = $(this).scrollTop();

            if (scroll_pos < 210) {
                $("body").css('background-color', 'black');
            }
            else if (scroll_pos > 210) {
                $("body").css('background-color', 'red');
            }
            else if (scroll_pos > 410) {
                $("body").css('background-color', 'orange');

            }

            else if (scroll_pos > 710) {
                $("body").css('background-color', 'green');

            }

        });
    });

这是小提琴 Fiddle Here

如果我做错了，请告诉我。感谢。

Answer 1

Working Fiddle

您需要在if语句中添加其他条件，以将background-color限制为scroll_pos。

            if (scroll_pos < 210) {
                $("body").css('background-color', 'black');
            }
            else if (scroll_pos > 210 && scroll_pos < 410) {
                $("body").css('background-color', 'red');
            }
            else if (scroll_pos > 410 && scroll_pos < 710) {
                $("body").css('background-color', 'orange');
            }
            else if (scroll_pos > 710) {
                $("body").css('background-color', 'green');

            }

Answer 2

我会这样解决：

    $(document).ready(function () {
        var scroll_pos = 0;
        var color = 'black';
        $(document).scroll(function () {
            scroll_pos = $(this).scrollTop();

            if (scroll_pos < 210) {
                color = 'black';
            }
            if (scroll_pos > 210) {
                color = 'red';
            }
            if (scroll_pos > 410) {
                color = 'orange';
            }
            if (scroll_pos > 710) {
                color = 'green';
            }
            $("body").css('background-color', color );

        });
    });

存储要在变量中使用的颜色。随着条件变大，更改变量。最后将变量应用为background-color属性。无需比较大小，只需按比较顺序构建更大。

在这里小提琴：http://jsfiddle.net/x69xm/4/

Answer 3

试试这个

$(document).ready(function () {
            var scroll_pos = 0;
            $(document).scroll(function () {
                scroll_pos = $(this).scrollTop();

                if (scroll_pos < 210) {
                    $("body").css('background-color', 'black');
                }
                else if (scroll_pos > 210 && scroll_pos < 410) {
                    $("body").css('background-color', 'red');
                }
                else if (scroll_pos > 410 && scroll_pos < 710) {
                    $("body").css('background-color', 'orange');

                }

                else if (scroll_pos > 710) {
                    $("body").css('background-color', 'green');

                }
                console.log(scroll_pos)

            });
        });

DEMO

在某个位置滚动时更改背景颜色

3 个答案: