Изменение цвета фона липкого заголовка Fullpage.js при прокрутке

У меня fullpage.js работает отлично, как я хочу. Также уже получил мой заголовок, чтобы быть липким. Он начинает быть прозрачным, а при прокрутке его фон становится белым. Дело в том, что когда я включаю fullpage.js, создается впечатление, что заголовок не обнаруживает никакой прокрутки, и поэтому, хотя он остается липким, цвет фона не меняется.

Я протестировал различные настройки, чтобы увидеть, работают ли они, но ни один из них еще не работал. Я совершенно новичок в кодировании.

jQuery(document).ready(function($) {
$('#fullpage').fullpage({
    //options here
    scrollingSpeed: 1000,
    autoScrolling: true,
    navigation: true,
    slidesNavigation: true, 
    css3: false,
    fitToSection: true,
    fitToSectionDelay: 0,
    scrollBar: false,
    lazyLoading: true,
    menu: true

});
//methods
$.fn.fullpage.setAllowScrolling(true);
$("#navigation").sticky({topSpacing:0}).css({'background':'#000'});

});

Я хочу, чтобы при прокрутке fullpage.js заголовок менял цвет. В настоящее время он не обнаруживает никакой прокрутки. Извините, если это слишком просто. Я просто пытаюсь учиться и спасибо!


fullpage.js elementor
person ZekenK    schedule 27.05.2019    source источник
comment
Я думаю, что пример был бы хорошим, вот чего я хотел бы достичь. zientte.com Способ изменения заголовка при прокрутке вниз.   -  person ZekenK    schedule 28.05.2019
comment
Как вы используете fullPage.js в elementor? Любой плагин?   -  person Alvaro    schedule 28.05.2019
comment
Ну, я действительно просто добавляю CSS с плагином. Пользовательские CSS и JS. Дело в том, что при чтении каждого сообщения, связанного с этим, опция прокрутки в основном отключена, если у вас есть autoscroll: true и scrollBar: true. Я не могу использовать ни один из них, потому что они делают прокрутку причудливой, что противоречит цели fullpage.js. Я видел видео, и хотя оно действительно ясное, и я понимаю процесс, я действительно не знаю, как использовать классы состояний для достижения того, что мне нужно. Когда я проверяю тело, он показывает очень длинный класс тела, должен ли я использовать весь этот класс для нацеливания на тело? Спасибо   -  person ZekenK    schedule 28.05.2019
comment
Не смог как следует поблагодарить Альваро в предыдущем посте. Большое спасибо. Плагин рулит! обязательно буду использовать его с новыми проектами и реализовывать расширения :)   -  person ZekenK    schedule 28.05.2019
comment
Вам просто нужно использовать класс fp-viewing-X-Y, где X — якорь раздела, а Y — якорь слайда. Так же, как я объяснил в видео. Вы можете использовать эти классы для запуска условий CSS. scrollBar:true не должно быть причудливым, на самом деле демонстрационная страницаscrollBar:true работает как ожидал. Возможно, ваша страница слишком тяжелая для этого и связывает слишком много вещей в событии прокрутки?   -  person Alvaro    schedule 29.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Как подробно описано в Часто задаваемые вопросы о fullPage.js вам нужно будет использовать scrollBar:true или autoScrolling:false, если вы хотите полагаться на событие прокрутки.

В противном случае следует использовать обратные вызовы fullPage.js или классы состояния для обработки этих изменений состояния.

Вы можете посмотреть мой видеоурок о том, как использовать классы состояний fullpage.js. для запуска изменений в состоянии.

person Alvaro    schedule 28.05.2019