Javascript Girl
  1. Javascript Girl
  3. Comment faire de cette barre de navigation flottant en haut en faisant défiler?
Intereting Posts
Événement de chargement de fenêtre de rappel – javascript Comment changer au hasard les images en ligne sur le chargement de la page et chaque rafraîchissement, en utilisant jquery? Liaison et minimisation de JavaScript modulaire (RequireJS / AMD) avec ASP.NET MVC Définir iframe innerHTML sans charger la page (avec jquery) Comment re-rendre la page après une base de données ajouter un appel sans rafraîchir? Google Maps JavaScript API V3 – Décharger / Déconstruire / Supprimer / Supprimer Compression de code JavaScript Optimisations pour réduire le temps de chargement du site Web Phantomjs n'exécute pas la fonction dans la fonction page.evaluate Pourquoi + = "1,23,4" en JavaScript? Compression de chaînes en JavaScript Comment appeler la fonction javascript de code-behind Appeler une fonction de fenêtre parent d'un iframe Envoi de courrier électronique avec Node Mailer et Sendgrid dans la pile angular MEAN à l'aide de la plate-forme angulaire de Yeoman .trim () en JavaScript ne fonctionne pas dans IE

Comment faire de cette barre de navigation flottant en haut en faisant défiler?

Toute la barre de navigation ainsi que ses paramètres JavaScript peuvent être trouvés ici

Http://jsfiddle.net/DyJzg/3/

En ce moment, il reste en haut de la page, mais je me demande si cela pourrait être flottant sur le dessus même lorsque vous faites défiler la page. Merci.

Je pense que vous devez utiliser le position:fixed 

 nav { position:fixed; top:0; width:100%; }

Ici est modifié jsfiddle

Si votre élément est 'nav' ou que votre classe d'élément est '.nav', utilisez ce code css: 

 nav, .nav{ position:fixed; top:0; width:your_custom_with; height: your_custom_height }

Note: consultez cet article du positionnement css pour plus de détails: http://www.w3schools.com/css/css_positioning.asp

Juste au large de la tête, ce qui suit devrait le faire … 

 .nav{ display:block; position:absolute; top:0; left:0; right:0; width:100%; }