Affichage d'éléments en fonction du scroll/ancre sur site fullpage

Bonjour,

Pour faire mon portfolio en ligne j'ai décidé d'utiliser le plugin fullPage.js. Il est donc structuré en 4 sections ayant chacune une ancre différente.
<li data-menuanchor="firstPage"><a href="#firstPage">Accueil</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Travaux</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">A propos</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Contact</a></li>

J'ai réussi à intégrer un bouton pour retourner à la première section gâce à son ancre, sorte de retour en haut, avec ce code :
<a href="#firstPage"><img src="images/retour-haut.png" id="backtotop"></a>

Mais j'aimerai qu'il n'apparaisse qu'à partir de la deuxième section. Je pense que le même problème se posera pour mon menu secondaire. Quelqu'un saurait-il comment m'aider svp ?

Hello,

Pour cela, tu dois utiliser du js, j'image que tu a jQuery.
Normalement, il te suffit de binder le scroll et de voir si ta deuxième section est au dessus de la ligne de flottaison, ce qui donnerai ceci :

(function() {
	var $firstPage = $("#firstPage").height(),
		$backToTop = $("#backtotop");

	$(window).bind("scroll", function() {
		if ($(document).scrollTop() >= $firstPage) {
			$backToTop.show();
		} else {
			$backToTop.hide();
		}
	});
})();

Explication : à chaque scroll de la page (bind scroll) je vérifie si la nouvelle position de ton écran sur ta page est supérieure ou égale à la hauteur de ta première section. Si oui, j'affiche le lien, si non je le cache.

A tester, mais j'ai l'impression que le plugin empêche le calcul du scrollTop. Si le premier code ne fonctionne pas, essaie celui-ci :

(function() {
	var $firstPage = $("#firstPage"),
		$backToTop = $("#backtotop");

	$(window).bind("scroll", function() {
		if ($("#firstPage").hasClass("active")) {
			$backToTop.hide();
		} else {
			$backToTop.show();
		}
	});
})();

Explication : à chaque scroll de la page (bind scroll) je vérifie si la première section a la classe active. Si oui je cache le lien, sinon je l'affiche.

Normalement, ça devrait fonctionner.

Bye

Merci d'avoir répondu ...

Malheureusement aucun ne fonctionne. Je débute en développement mais quand je lis .hasClass("active") je me demande si je dois ajouter une classe dans mon CSS ou si c'est juste une écriture Java. J'ai trouvé un autre bout de code mais celui-ci me cache le bouton tout le temps ...

Tu n'aurais pas une url de test ?

Juste pour précision, c'est du Javascript, pas du Java