-
Fixer un menu au défilement
Pour fixer simplement votre menu, vous pouvez utiliser la propriété "position: fixed;" en CSS. En revanche, si votre menu est par exemple placé sous le header, vous voudriez pouvoir le fixer seulement une fois qu'il se trouve en haut de la page.
Pour cela, il faut utiliser du JavaScript.
/!\ Le JS doit être activé sur votre blogCommencez par créer votre menu en HTML (définissez le par un ID) , et placez le dans un module simple.
<div id="menuNavigation">MON MENU, AVEC DU TEXTE, DES LIENS ET DES IMAGES</div>Grâce au css, vous allez pouvoir le placer où vous voulez sur votre page, et modifier sont apparence. Dans cet exemple, je vais le placer sous mon #header, d'une hauteur de 250px.
Placez le en "position: absolute;"
=> [Tuto] Contenu hors des articles#menuNavigation { position: absolute;
top: 250px; /*hauteur du header*/
width: 800px; /*largeur du menu*/
left: 50%; /*place le bord gauche au centre*/
margin-left: -400px; /*décale la moitié du menu vers la gauche pour le placer au centre*/
propriété : valeur;
}Nous avons maintenant besoin de définir sont apparence quand il doit être "fixe". Je vais donc simplement ajouter une classe à mon id, et le définir en "position:fixed" (pour le fixer), ainsi qu'en "top: 0px;" pour le coller en haut de la page. Vous pouvez bien sûr ajouter d'autres propriétés pour changer sont apparence.
#menuNavigation.fixe { position: fixed;
top: 0px;
propriété : valeur;
}Maintenant, passons au javascript, que vous placez dans le même module que votre menu.
Un script JS se place toujours entre les balises <script> JS </script>
Nous allons utiliser window.onload pour exécuter notre script à la fin du chargement de la page.Commençons par définir nos variables : nous auront besoin bien évidemment de notre #menu, et si vous ne voulez pas vous embêter à calculer quand il doit se fixer, nous allons également récupérer #header.
window.onload=function(){
var menu = document.querySelector("#menuNavigation");
var header = document.querySelector("#header");
}Nous devons ensuite récupérer la taille de la fenêtre du client, et savoir de combien il a "scrollé" la page.
function scrolled(){
var windowHeight = document.body.clientHeight,
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
}Sachant cela, nous pouvons changer la classe de notre menu si la page a été "scrollée" de la hauteur du header. Toujours dans la fonction "scrolled" on ajoute l'instruction suivant :
menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";menu, c'est la variable représentant notre #menu.
className est une commande JS permettant de modifier la classe d'un élément. Ici, nous ajoutons la classe .fixe à #menuNavigation
currentScroll est le défilement de la page (scroll)
header est la variable représentant #header
offsetHeight est une commande permettant de récupérer la hauteur d'un élément (ici #header)Pour traduire cela, si le défilement de la page est supérieur ou égal à la hauteur du #header, la classe de #menuNavigation devient .fixe
Notre menu prend donc les paramètres de #menu.fixePour finir ce code, nous devons ajouter un EventListener, sans quoi nous ne pouvons pas récupérer le défillement (scroll) de la page.
addEventListener("scroll", scrolled, false);Voici le JS complet
<script>// <![CDATA[
window.onload=function(){
var menu = document.querySelector("#menuNavigation");
var header = document.querySelector("#header");
function scrolled(){
var windowHeight = document.body.clientHeight,
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
menu.className = (currentScroll >= header.offsetHeight) ? "fixe" : "";
}
addEventListener("scroll", scrolled, false);
}
// ]]></script>L'exemple ici est de fixer un menu en fonction du défilement de la page, mais vous pouvez utiliser cette technique pour modifier n'importe quel élément en fonction de votre position sur la page ;)
-
Commentaires
=> http://mondeimaginaire.eklablog.com
Le menu "bibliothèque, univers digital, galerie, divers" est fixé en haut de la page une fois que header est passé
MERCI BEAUCOUP *^*
(P.S. : Je trouve l'effet de la menubar sur mondeimaginaire magnifique, bravo o:)
Pour :
function scrolled(){
var windowHeight = document.body.clientHeight,
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
} Doit-on changer quelque chose ?Et à chaque fois qu’il y a mis « menu» on doit le remplacer par notre id ?
Il n'y a strictement rien à changer dans ce code.
menu est le nom que j'ai donné à la variable. La seule chose qu'il faut modifier, c'est dans la deuxième ligne :
var menu = document.querySelector("#menu");
Remplace #menu par le nom de ton id
Coucou Nagalia... cela fait maintes fois que j'essaie mais mon menu ne se fixe pas.. pourrais tu me dire pourquoi?
Ce serait vraiment trop gentil!!! Merkiiiiiiiiiiiiii (je suis trop mauvais)
Ce code va fixer le menu de la même façon que ta barre verte avec tes rubriques quand on scroll la page?
Merci de ta réponse! :)
=> http://fanstasy-graph.eklablog.net/attributs-a106963640
ID est l'abréviation d'Identifiant. C'est tout simplement le moyen de nommer et d'identifier un objet unique dans le code.
Besoin D'aide en JAVASCRIPT SVP CORDIALEMENT
- CSS
#back-top{position:fixed;bottom:30px;margin-left:-30px;}
#back-top a{width:108px;display:block;text-align:center;
font:11px/100% Arial,Helvetica,sans-serif;text-transform: uppercase;text-decoration: none;color: #bbb;/* transition */-webkit-transition:1s;-moz-transition:1s;transition: 1s;}
#back-top a:hover{color: #000; }/* arrow icon (span tag) */
#back-top{width:108px;height:108px;display:block;margin-bottom:7px;background:#ddd url(http://i1155.photobucket.com/albums/p559/scrolltotop/arrow29.png) no-repeat center center;/* rounded corners */-webkit-border-radius:15px;-moz-border-radius: 15px;border-radius: 15px;/* transition */-webkit-transition:1s;-moz-transition: 1s;transition: 1s;}
#back-top a:hover{background-color: #777; }- HTML
<p id="back-top"><a href="#top">back to top</a></p>
- javascript
<script type="text/javascript">// <![CDATA[
(document).ready(function(){
var ("#back-top").hide();
(function () {
(window).scroll(function () {
if ($(this).scrollTop() > 50) {
var ('#back-top').fadeIn('slow');
} else {
var ('#back-top').fadeOut('slow');
}
});
var ('#back-top a').click(function () {
var ('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
// ]] ></script>
- result
12AprilerDimanche 24 Janvier 2016 à 13:55Hello! Merci pour ces explications, petit soucis, je cherche à coller mon menu après scroll toujours mais à un autre menu (bandeau déjà fixé en haut de page), une solution? :)
13Yo18Jeudi 25 Février 2016 à 18:2114LilloupatchMardi 19 Avril 2016 à 14:41La lecture pourrait être super intéressante mais vous avez une pub qui cache toute une partie ^_^
Bonne continuation ^_^
Hey merci ! C'est exactement ce que je recherche, mais après plusieurs essais, je n'arrive pas à le faire :(
Merci pour ce tuto, j'attends l'activation du Javascript sur mon blog de test de thème pour voir si cela marche. :)
Salut! J'ai lu sur ton tuto des flèches que l'on pouvait utiliser ce code pour que les flèches n'apparaissent qu'après le header. J'ai beau essayé, ça ne fonctionne pas. Il y a rien qui bouge. Je dois sûrement pas comprendre le fonctionnement du code. Est-ce que ça serait possible de m'aider stp? Merci.
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog
J'ai pas compris l'effet qu'avait le code sur le menu ^^'