фон меняет цвета при прокрутке? для темы tumblr

Я использую тему tumblr, которая прокручивается вбок (это тема http://smpldesign.tumblr.com/post/4547439061/sleep-wave-2-0)

может кто-нибудь показать мне, как сделать фон красным при прокрутке? а затем, когда он перестанет прокручиваться, он снова станет белым?

вот что я вставил в CSS этой темы:

body {font-size: {text:Font Size}px; font-family: {font:Body}; 
color: {color:Text}; text-align:justify; height:100%;
}

body {background:#F50;
transition:all 400ms ease-in;
}

.scrolling {
background:#FF0;
transition:all 400ms ease-in;
} 
table tr { 
vertical-align: top; 
});

вот что я поставил перед закрытием тега body:

{/block:Posts}
</div>
</div>

<script>
$(document).on('scrollstart',function(){
$('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
$('body').removeClass('scrolling');
}); </script>

});

у меня это не работает.

я поместил весь код здесь в pastebin

http://pastebin.com/FX2a8nin


jquery tumblr
person user3446988    schedule 08.04.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Предполагая, что у вас есть #wrapper div, вы можете сделать что-то вроде того, что показано в этой скрипке здесь

Имея информацию, которую я смог собрать, я предполагаю, что вы хотели изменить фон, когда пользователь прокручивает страницу вниз, а затем, когда они прекращают прокрутку, измените фон обратно.

JQuery будет таким:

jQuery(window).load(function () {
    $(window).scroll(function() {
        $("#wrapper").css('background', 'red');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer',setTimeout(function() {
            $("#wrapper").css('background', 'blue');
        }, 250));
    });
});

Вы должны иметь возможность привязать это к своей теме tumblr, но убедитесь, что jQuery был загружен ранее:

Вы также можете просто использовать тег body, заменив $('#wrapper').css("background", "red"); на $('body').css("background", "red");. Не стесняйтесь заменять «красный» и «синий» желаемыми цветами.

Наконец, если вы хотите использовать классы вместо фонового селектора CSS, просто используйте .addClass('classname') вместо .css('background', 'color')

РЕДАКТИРОВАТЬ: Не стесняйтесь использовать событие stopcroll, опубликованное @Shaharz, чтобы сделать код немного чище.

person Schybo    schedule 08.04.2015

arrow_upward
1
arrow_downward

Чтобы добавить к ответу @ShaharZ, я раздвоил скрипку, на которую есть ссылка в вопросе ссылки.

http://jsfiddle.net/lharby/fbSbT/78/

В основном мы добавляем или удаляем класс прокрутки в теле, и этот класс также содержит переходы для сглаживания эффекта.

Окончательный js (после использования этих пользовательских событий) выглядит так:

$(document).on('scrollstart',function(){
    $('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
   $('body').removeClass('scrolling');
});

Тогда css очень прост:

body {
   background:#F50;
   transition:all 400ms ease-in;
}

.scrolling {
    background:#FF0;
    transition:all 400ms ease-in;
}

ИЗМЕНИТЬ

На самом деле я разветвил скрипку @Schybo, так как код намного чище и проще для понимания. Вот раздвоенная скрипка:

https://jsfiddle.net/lharby/xxmgceh9/3/

person lharby    schedule 09.04.2015
comment
хорошо, я понимаю, как это работает, я просто не понимаю, как поместить скрипт jquery в тему tumblr. - person user3446988; 09.04.2015
comment
Большинство тем поставляются с jquery, и есть несколько способов проверить это. Я перешел по ссылке на вашу тему, открыл консоль и набрал $; и возвращаюсь, и тогда я вижу, что jquery доступен. Вы также можете заглянуть внутрь шаблона и просто найти jquery. Он также должен быть указан на панели «Ресурсы». - person lharby; 09.04.2015
comment
Итак, в нижней части вашего шаблона перед закрывающим тегом body создайте тег скрипта и вставьте туда свой собственный jquery. - person lharby; 09.04.2015
comment
Вы можете выгрузить все содержимое в pastebin, а затем кто-нибудь сможет его отредактировать. Однако это не очень дружелюбно. Если вы пытались реализовать это в теме, можно проверить URL-адрес, открыть консоль и поискать ошибки. - person lharby; 09.04.2015
comment
хорошо, я отредактировал вопрос, а также поставил ссылку pastebin. - person user3446988; 09.04.2015
comment
pastebin.com/F6G4gvy3 - person lharby; 09.04.2015
comment
Удивлен, что на самом деле это сработало, но я использовал код из @Schybo, поскольку он лучше, но он нацелен на элемент под названием #wrapper, которого нет в вашем коде, поэтому я нацелился на элемент body. - person lharby; 09.04.2015
comment
еще один вопрос, как добавить в эту тему бесконечную прокрутку? типичный способ не применим - person user3446988; 09.04.2015
comment
Я бы отправил это как новый вопрос. - person lharby; 10.04.2015

arrow_upward
0
arrow_downward

В этом вопросе описывается, как узнать, когда пользователь начинает и прекращает прокрутку: Fire event после прокрутки полос прокрутки или колеса мыши с помощью javascript

После того, как у вас есть эти события, все, что вам нужно сделать, это что-то вроде

css:

body.scrolling {
    background-color: red;
}

javascript:

$(window).on('startScroll', function() {
    $('body').addClass('scrolling')
}
$(window).on('stopScroll', function() {
    $('body').removeClass('scrolling')
}
person ShaharZ    schedule 08.04.2015
comment
Я новичок в кодировании, можете ли вы точно показать мне, где я буду размещать каждый бит, который мне нужен? также .. я хочу эффект затухания ... не резкое изменение. - person user3446988; 09.04.2015