Menu fixe apres scroll

Soyez le premier à donner votre avis sur cette source.

Vue 5 847 fois - Téléchargée 1 051 fois

Télécharger le projet
Commenter

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;
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

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

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.

Du même auteur (@karamel)