Javascript Girl
  1. Javascript Girl
  3. Bootstrap 3 affix navbar devient transparent et non réglable lors du défilement et du chevauchement du contenu
Intereting Posts
Comment faire passer l'objet dans un tableau en utilisant AngularJS Position de défilement de div avec "débordement: automatique" Comment puis-je implémenter un Pattern en chaîne comme jQuery? Comment accéder aux attributs personnalisés de l'objet événement dans React? Comment accéder à une propriété dynamique: objectName. {Variable} Deuxième argument pour parseFloat en JavaScript? Comment soumettre un formulaire sur un site Web externe et obtenir un HTML généré? Chaîne Unicode divisée par caractères Tri d'une liste par ordre alphabétique avec un module Abonnement à l'événement Javascript après UpdatePanel async postback Inverser une chaîne en JavaScript JQuery: Existe-t-il un moyen d'ajouter automatiquement des attributs au HTML généré de manière dynamique, de la même manière que live () fonctionne avec des événements? Passer le paramètre à la fonction Javascript à partir du code ASP derrière Comment éviter les problèmes de fuseau horaire avec JQuery datepicker Comment accéder aux propriétés d'un objet JavaScript en utilisant les valeurs de propriété d'un autre objet

Bootstrap 3 affix navbar devient transparent et non réglable lors du défilement et du chevauchement du contenu

Je suis sûr que c'est très simple mais je suis assez nouveau chez Bootstrap et même dans html / css.

Je veux que mon navbar soit après mon en-tête et qu'il soit fixé au sommet en défilant. J'ai travaillé, MAIS: la barre de navigation devient transparente et non réglable lors du défilement et au-dessus de mon autre contenu.

Comment puis-je surmonter cela?

Voici mon .html:

` 

<div id="nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Your Company</a> </div> <div class="collapse navbar-collapse" style> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#everyday">Everyday</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </div> </div> </div>

`

Voici mon apposition .css: 

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

Voici mes js connexes: 

 $(function() { $('#nav-wrapper').height($("#nav").height()); $('#nav').affix({ offset: { top: $('#nav').offset().top } }); });

Je vous remercie!

Changez l' z-index de #nav pour: 

 #nav{ z-index:9999; }