raselgit
@raselgit
Веб-дизайнер

Как изменить класс у шапки при скролле FullPage.js?

На главной странице с помощью плагина FullPage.js сделан секционный скролл. Помимо этого, отдельно есть шапка, которая прижата к верхней части экрана и ездит при скролле. Вот структура:
<header class="header"></header>

<main class="fullpage">

	<section class="section"></section>

	<section class="section"></section>

	<section class="section"></section>

</main>

Пытаюсь сделать так, чтобы, когда активна первая секция, шапка была прозрачной. Во всех других случаях, она должна быть белой.

Я пытался с помощью документации разобраться с коллбэками, но ничего не вышло. Как можно решить эту проблему?
  • Вопрос задан
  • 328 просмотров
Решения вопроса 1
john36allTa
@john36allTa
alien glow of a dirty mind
new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage'],
	onLeave: function(origin, destination, direction){
		var loadedSection = this,   
			  header = document.querySelector("header.header");
		//using index если прозрачный = фон
		if(origin.index == 0 and direction =='down'){
			header.style.opacity = 0; 
		}
		else if(origin.index == 1 and direction =='up'){
			header.style.opacity = 1;
		}
		//using anchorLink если прозрачный = цвет фона
		if(origin.anchor == 'firstPage' and direction =='down'){
			header.style.backgroundColor = 'transparent'; 
		}
		else if(origin.anchor == 'secondPage' and direction === 'up'){
			header.style.backgroundColor = 'white';
		}
	}
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mtvphnx
@mtvphnx
Двигаю пиксели, играюсь со шрифтами
$(window).on('scroll load', function () {
    if ((document.documentElement.scrollTop > 20) || (document.body.scrollTop > 20)) {
        $('.header').addClass('header_scroll');
    } else {
        if ($('.header').hasClass('header_scroll')) {
            $('.header').removeClass('header_scroll');
        }
    }
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы