Menu fixe apres scroll

Soyez le premier à donner votre avis sur cette source.

Vue 7 071 fois - Téléchargée 1 208 fois

Description

il s'agit du menu qui se fixe a un certain niveau de scroll contrairement a ce que l'on voit d'habitude ici tout est géré par le javascript il n'y a pas de changement de class et il est possible de mettre plusieurs element

la mise en place est des plus simple il suffit de mettre un attribut data-stic en spécifiant la marge du haut

<div id='autre' data-stic="40"></div>


et l'element doit avoir un position css en fixed

position:fixed;

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
86
le choix que j'ai fait est l'abstraction afin de donner un id différent aux éléments ou ne pas en donner, donner n’importe quelle nom de class afin de créer des styles différent pour chaque element. La seule contrainte est de mettre un data attribut data-stic en precisant la position. Apres ca j' en convient qu'utiliser
document.getElementsByTagName("*")
force le parcoure de tous les elements d'une page mais esse vraiment important pour ca il faudrait faire les teste sur une page tres lourde.

Sinon ce que j'ai chercher a faire c'est ce que propose le framwork angular en spécifiant des attribut.

concernant hasAttribute il fait partie du dom level 2 sortie en 2000 qui fait 19 ans et qui est supporté par tous les navigateurs depuis leurs debut seul ie le supporte a partir de la version 8 et trop peut de personnes utilise les versions antérieur.


pour height:100% je voit pas l’intérêt vue qu'il est définit en fonction de la hauteur du contenu.
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
86
je veut bien te croire mais pourquoi l'utilisation de
document.getElementsByTagName('*')
est moche que propose tu comme meilleur solution ?
Messages postés
2
Date d'inscription
vendredi 31 mai 2019
Statut
Membre
Dernière intervention
31 mai 2019
>
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020

Si l'on veut assurer une compatibilité totale avec les vieux navigateurs, il faut créer un tableau d'éléments en utilisant getElementById et éviter d'utiliser la méthode hasAttribute qui n'existe pas sur ces vieux navigateurs. Le plus simple reste de donner une classe à ces objets et d'utiliser la méthode getElementsByClassName. Il n'y a pas de nécessité de récupérer tous les noeuds et de les parcourir un à un pour tester si l'attribut existe, même sur une page dynamique.
Messages postés
2
Date d'inscription
vendredi 31 mai 2019
Statut
Membre
Dernière intervention
31 mai 2019

Attention car c'est du code sale (voire très sale).
Pensez à ajouter :

html, body{
 height:100%;
}


...si vous utilisez le nouveau doctype (<!doctype html>) sinon l'image ne s'affichera pas.

Le code JavaScript est catastrophique, que dire de l'utilisation de
document.getElementsByTagName('*')
:s
La partie JS demanderait à être entièrement réécrite car c'est pas du tout comme ça qu'il faut faire.
Réflexion faite : je vois que ça marche ! Ce qui m'a perturbé c'est tout cet espace noire autour du menu...
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.