La documentation bootstrap sur ce sujet est un peu déroutante pour moi. Je veux obtenir un comportement similaire comme dans les documents avec l'affixe navbar: la barre de navigation est en dessous d'un en-tête de paragraphe / page, et lors du défilement vers le bas, elle doit d'abord défiler jusqu'à atteindre le haut de la page, puis rester fixe pour d'autres défilements. .
Comme jsFiddle ne fonctionne pas avec le concept de la barre de navigation, j'ai configuré une page distincte à utiliser comme exemple minimal: http://i08fs1.ira.uka.de/~s_drr/navbar.html
J'utilise ceci comme barre de navigation:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Je pense que je voudrais avoir data-offset-top
une valeur de 0 (puisque la barre doit "coller" tout en haut "mais avec 50 il y a au moins un effet observable.
Si vous mettez également le code javascript en place:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Toute aide appréciée.
la source
.navbar-fixed-top
au lieu d'utiliser affix ()?.navbar-fixed-top
placerait la barre de navigation vers le haut tout le temps . Je veux un en-tête de page AU-DESSUS de la barre de navigation, et lors du défilement vers le bas (et donc la barre de navigation parierait défilée), il devrait rester en haut - alors et seulement alors. Les documents Bootstrap utilisaient les mêmes mécanismes qu'un sous-navigateur dans leurs documents précédents, malheureusement ils l'ont supprimé pour les documents 2.1.0.)};
devrait être});
Réponses:
J'avais un problème similaire et je crois avoir trouvé une solution améliorée.
Ne vous embêtez pas à spécifier
data-offset-top
dans votre HTML. Au lieu de cela, spécifiez-le lorsque vous appelez.affix()
:L'avantage ici est que vous pouvez modifier la mise en page de votre site sans avoir besoin de mettre à jour l'
data-offset-top
attribut. Dans la mesure où cela utilise la position réelle calculée de l'élément, cela évite également les incohérences avec les navigateurs qui rendent l'élément à une position légèrement différente.Vous aurez toujours besoin de serrer l'élément vers le haut avec CSS. De plus, j'ai dû
width: 100%
activer l'élément nav car les.nav
éléments se comportentposition: fixed
mal pour une raison quelconque:Une dernière chose: lorsqu'un élément apposé devient fixe, son élément ne prend plus de place sur la page, ce qui fait que les éléments en dessous "sautent". Pour éviter cette laideur, j'enroule la barre de navigation dans un
div
dont la hauteur que j'ai définie pour être égale à la barre de navigation à l'exécution:.
Voici le jsFiddle obligatoire pour le voir en action .
la source
Je viens de l'implémenter pour la première fois, et voici ce que j'ai trouvé.
La
data-offset-top
valeur est la quantité de pixels que vous devez faire défiler pour que l'effet d'apposition ait lieu. Dans votre cas, une fois le50px
défilement, la classe de votre élément passe de.affix-top
à.affix
. Vous voudrez probablement vous mettredata-offset-top
à environ130px
dans votre cas d'utilisation.Une fois ce changement de classe effectué, vous devez positionner votre élément en css en stylisant le positionnement de la classe
.affix
. Bootstrap 2.1 définit déjà.affix
commeposition: fixed;
si tout ce que vous avez à faire est d'ajouter vos propres valeurs de position.Exemple:
la source
.navbar
classe est préservée - êtes-vous sûr?Pour résoudre ce problème, j'ai modifié le plugin affixe pour émettre un événement jQuery lorsqu'un objet est apposé ou non.
Voici la pull request: https://github.com/twitter/bootstrap/pull/4712
Et le code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
Et puis faites ceci pour attacher la barre de navigation:
la source
Vous devez supprimer
.affix()
de votre script.Bootstrap donne la possibilité d'accomplir des choses via
data-attributes
ou directement en JavaScript la plupart du temps.la source
J'ai ceci du code source de twitterbootstrap et cela fonctionne plutôt bien:
HTML:
CSS:
JS:
la source
Il vous suffit de supprimer le script. Voici mon exemple:
la source
Merci à namuol et Dave Kiss pour la solution. Dans mon cas, j'ai eu un petit problème avec la hauteur et la largeur de la barre de navigation lorsque j'ai utilisé les plugins afflix et collapse ensemble. Le problème avec la largeur peut être facilement résolu en héritant de l'élément parent (conteneur dans mon cas). J'ai également pu réussir à le faire s'effondrer en douceur avec un peu de javascript (coffeescript en fait). L'astuce consiste à définir la hauteur de l'enveloppe sur
auto
avant que la bascule de réduction ne se produise et à la corriger après.Balisage (haml):
CSS:
Coffeescript:
la source
Ma solution pour attacher la barre de navigation:
la source
Similaire à la réponse acceptée, vous pouvez également faire quelque chose comme ce qui suit pour tout faire en une seule fois:
Cela n'invoque pas seulement le
affix
plugin, mais enveloppera également l'élément apposé dans un div qui maintiendra la hauteur d'origine de la barre de navigation.la source