Menu fixe apres scroll

Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
- - Dernière réponse : @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
- 1 juin 2019 à 20:11
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/101976-menu-fixe-apres-scroll

@karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51 -
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.
@karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51 -
je veut bien te croire mais pourquoi l'utilisation de
document.getElementsByTagName('*')
est moche que propose tu comme meilleur solution ?
m0rganana
Messages postés
2
Date d'inscription
vendredi 31 mai 2019
Statut
Membre
Dernière intervention
31 mai 2019
> @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
-
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.
m0rganana
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...