滚动背景图像

Question

I would like to change background image of one div on scrolling the browser.

Here is my code

$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 {

    }
});

Now, when i scroll 300px, the first class adding without any problem, but when I scroll more no other classes adding to it.

Please help. Thanks..

Answer 1

you can reverse the conditions

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

Its because it is always going into your first if.

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

You need a less than check in your if.

Answer 3

You need range as mentioned in above answer of @Thomas Harris. But you need range for all condition. Try this:

$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 {

    }
});