Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn1Pin on Pinterest1Share on StumbleUpon0Share on Tumblr0

tutoriel-javascript-fix-menu
Bonjour à tous ! Aujourd’hui je vous présente une façon de fixer un menu au défilement de la page en javascript. J’ai voulu le faire il y a déjà un moment et j’ai donc fait quelques recherches et voilà la solution que j’ai trouvé. (cette solution est intégrée à technews.fr :)

Le principe

Le principe du code javascript consiste à écouter le scroll de la page. Quand le niveau de scroll atteint un élément en particulier (ici le menu) on peut déclencher une action, par exemple ici l’ajout d’une classe CSS à notre menu et ainsi on retire cette classe lorsque le scoll est inférieur au menu.

Implémentation

J’ai fait une page très simple juste pour visualiser le principe de la fixation. Il faut bien penser à inclure JQuery pour que cela fonctionne ;)
Voici le code HTML CSS et JS de notre page.

<html>
<head>
	<style>
		#menu{
			text-align: center;
			font-size: 35px;
		}
		.fixedTop{
			position: fixed;
			top:0;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
		}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
</head>
<body>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
	<div id="menu">Mon Menu</div>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
<h1>Du contenu</h1>
</body>
<script>
var positionElementInPage = $('#menu').offset().top;
$( window ).resize(function() {
    positionElementInPage = $('#menu').offset().top;
});
$(window).scroll(
    function() {
        if ($(window).scrollTop() > positionElementInPage) {
            // fixed
            $('#menu').addClass("fixedTop");
        } else {
            // unfixed
            $('#menu').removeClass("fixedTop");
        }
    }
 
  );
</script>
</html>

J’espère que ce code pourra en aider parmi vous. Si vous avez des questions, les commentaires sont là pour cela ;)

Partagez l'article !Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn1Pin on Pinterest1Share on StumbleUpon0Share on Tumblr0