javascript - 滚动时背景图像变化

Question

我想在滚动浏览器时更改一个 div 的背景图像。

这是我的代码

$element = $('.girlBg'),
classNameOne = 'girlBg1';
classNameTwo = 'girlBg2';
classNameThree = 'girlBg3';
classNameFour = 'girlBg4';
classNameFive = 'girlBg5';
classNameSix = 'girlBg6';

$document.scroll(function () {
    if ($document.scrollTop() >= 300) {
        $element.addClass(classNameOne);
    } else if ($document.scrollTop() >= 600) {
        $element.addClass(classNameTwo);
    } else if ($document.scrollTop() >= 900) {
        $element.addClass(classNameThree);
    } else if ($document.scrollTop() >= 1200) {
        $element.addClass(classNameFour);
    } else if ($document.scrollTop() >= 1500) {
        $element.addClass(classNameFive);
    } else if ($document.scrollTop() >= 1800) {
        $element.addClass(classNameSix);
    } else {

    }
});

现在，当我滚动 300px 时，第一个类添加没有任何问题，但是当我滚动更多时，没有其他类添加到它。

请帮忙。谢谢..

Answer 1

您可以逆转条件

if ($document.scrollTop() >= 1800) {
        $element.addClass(classNameOne);
    } else if ($document.scrollTop() >= 1500) {
        $element.addClass(classNameTwo);
    } else if ($document.scrollTop() >= 1200) {
        $element.addClass(classNameThree);
    } else if ($document.scrollTop() >= 900) {
        $element.addClass(classNameFour);
    } else if ($document.scrollTop() >= 600) {
        $element.addClass(classNameFive);
    } else if ($document.scrollTop() >= 300) {
        $element.addClass(classNameSix);
    } else {

    }