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

Question

[Расул Гитинов]

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

<header class="header"></header>

<main class="fullpage">

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

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

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

</main>

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

Я пытался с помощью документации разобраться с коллбэками, но ничего не вышло. Как можно решить эту проблему?

Answer 1

[Somewhere Intech]

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';
		}
	}
});

Comments

[Расул Гитинов]

А можете на моем примере показать, а то у меня не срабатывает нормально?

// Full Page

$('.screens').fullpage({

	anchors:['first', 'second', 'third'],
	sectionSelector: '.screen',
	verticalCentered: false

});

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

[Сергей Горячев]

Расул Гитинов,

// Full Page

$('.screens').fullpage({

  anchors:['first', 'second', 'third'],
  sectionSelector: '.screen',
  verticalCentered: false,

  onLeave: function(origin, destination, direction){

    if(destination.index == 0){ // нулевой слайд
      $('.header').addClass('header--transparent');
    }

    if(destination.index !== 0){ // не нулевой слайд
      $('.header').removeClass('header--transparent');
    }

  }

});

[Somewhere Intech]

// Full Page

$('.screens').fullpage({

  anchors:['first', 'second', 'third'],
  sectionSelector: '.screen',
  verticalCentered: false,

  onLeave: function(origin, destination, direction){
    destination.index === 0 ? $('.header').addClass('header--transparent') : $('.header').removeClass('header--transparent');
  }
});

[Расул Гитинов]

Сергей Горячев, Johnny Lowhunter, Оба варианта работают как надо. Спасибо!

Answer 2

[Матвей Феникс]

$(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');
        }
    }
});

Comments

[Расул Гитинов]

Насколько я понял, при использовании этого плагина, высота экрана становится 100% и скролл классический пропадает.

И еще, этот функционал ине нужен только на главной странице. На остальных страницах шапка не должна реагировать на скролл.