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 {

    }

Answer 2

因为它总是进入你的第一个if。

if ($document.scrollTop() >= 300 && $document.scrollTop() < 600) {

您需要少于检查if。

Answer 3

你需要@Thomas Harris上面回答中提到的范围。但是你需要所有条件的范围。试试这个：

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

    }
});

滚动背景图像更改

3 个答案: