Grafikart,
il y a 14 ans
Bonne idée jgarde ça en stock :)
Bonjour,
Je suis en train de créer mon site portfolio en one page, j'ai visionné le tuto qui concerne ce sujet et il était vraiment très utile et intéressant.
Cependant, j'ai un problème:
Je souhaiterais appliquer la class active aux boutons du menus lorsque que je scoll manuellement... par exemple si je scroll jusqu'à la partie contact, j'aimerais que le bouton contact s'active. Savez-vous comment faire?
Merci d'avance :)
6 réponses
Namor,
il y a 14 ans
D'accord merci ;)
MrGuillou,
il y a 14 ans
Bonjour,
Si tu connais la hauteur de tes différentes zones tu peux tenter quelque chose qui ressemble à cela.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(document).scroll(function(){
var top = $(this).scrollTop();
if (top > 3000)
{
$('div.test').html("contact");
}
else if(top > 2000 && top <= 3000)
{
$('div.test').html("portfolio");
}
else if(top > 1000 && top <= 2000)
{
$('div.test').html("cv");
}
else if(top > 0 && top <= 1000)
{
$('div.test').html("accuil");
}
});
});
</script>
</head>
<body style="height:4000px;">
<div style="z-index: 10;position:fixed; top: 0;left: 0;" class="test"></div>
</body>
</html>Sinon c'est plus complexe
Namor,
il y a 14 ans
Merci! je vais essayer ca :)
Namor,
il y a 14 ans
Est-ce-qu'il y a un moyen de le faire par rapport aux encres et non pas la hauteur?
Namor,
il y a 14 ans
Re salut!
Alors après pleins de recherches et de prises de tête, j'ai enfin réussi à faire ce que je voulais grâce à un plugin développé par un dénommé Travor Davis, son site --> http://trevordavis.net/blog/jquery-one-page-navigation-plugin.
Il suffit d'appliquer un id="nav" à son menu, styliser la class .current et ça fonctionne!
Merci et bonne soirée! ;)