Изменение фонового изображения при прокрутке

Question

Изменение фонового изображения при прокрутке

0

Я хотел бы изменить фоновое изображение одного 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 {

    }
});

Теперь, когда я прокручиваю 300 пикселей, первый класс добавляется без каких-либо проблем, но когда я прокручиваю больше других добавочных классов.

Пожалуйста помоги. Благодаря..

Ganesh Kumar G 03 дек. 2013, в 09:15

Источник

Теги:

javascript

jquery

3 ответа

3

вы можете изменить условия

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 {

    }

akbar ali 03 дек. 2013, в 04:39

0

Спасибо за ваше время..
Ganesh Kumar G 03 дек. 2013, в 09:13

2

Это потому, что он всегда идет в ваш первый, если.

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

Вам нужно меньше, чем проверить в вашем случае.

Thomas Harris 03 дек. 2013, в 05:52

0

Спасибо за ваше время..
Ganesh Kumar G 03 дек. 2013, в 09:12

Ещё вопросы

Vijay Verma · Accepted Answer · 2013-12-03T05-53-00.000Z

Вам нужен диапазон, как указано в предыдущем ответе @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 {

    }
});