Tuto site one page portfolio

Namor
Javascript

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
Auteur
Réponse acceptée

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! ;)

Grafikart

Bonne idée jgarde ça en stock :)

Namor
Auteur

D'accord merci ;)

MrGuillou

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

http://www.grafikart.fr/forum/topic/4030

Namor
Auteur

Merci! je vais essayer ca :)

Namor
Auteur

Est-ce-qu'il y a un moyen de le faire par rapport aux encres et non pas la hauteur?