web-dev-qa-db-fra.com

Comment utiliser le nouveau plugin affixe dans le bootstrap 2.1.0 de Twitter?

La documentation de démarrage sur ce sujet est un peu déroutant pour moi. Je souhaite obtenir le même comportement que dans les documents avec la barre de navigation affixée: la barre de navigation est située au-dessous d'un en-tête de paragraphe/page et, lors du défilement, elle devrait d'abord défiler jusqu'au sommet de la page, puis y rester fixée pour permettre des défilement plus poussés .

Comme jsFiddle ne fonctionne pas avec le concept navbar, j'ai créé une page distincte à utiliser comme exemple minimal: http://i08fs1.ira.uka.de/~s_drr/navbar.html

J'utilise ceci comme ma 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 que data-offset-top soit de valeur 0 (puisque la barre doit "coller" au sommet ") mais avec 50, il y a au moins un effet observable.

Si également mettre le code javascript en place:

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

Toute aide appréciée.

csscss3webtwitter-bootstrapnavbar
110
Dynalon

J'avais un problème similaire et je pense avoir trouvé une solution améliorée.

Ne prenez pas la peine de spécifier data-offset-top dans votre code HTML. Indiquez-le plutôt lorsque vous appelez .affix():

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});​

L'avantage ici est que vous pouvez modifier la mise en page de votre site sans avoir à mettre à jour l'attribut data-offset-top. Comme 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 fixer l'élément au sommet avec CSS. De plus, je devais définir width: 100% sur l'élément de navigation car .nav éléments avec position: fixed se conduisent mal pour une raison quelconque:

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

Une dernière chose: lorsqu'un élément apposé devient fixe, son élément ne prend plus de place sur la page, ce qui entraîne le "saut" des éléments situés en dessous. Pour éviter cette laideur, je place la barre de navigation dans une div dont la hauteur est égale à la barre de navigation à l'exécution:

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

Voici le jsFiddle obligatoire pour le voir en action .

160
namuol

Cela vient d’être implémenté pour la première fois, et voici ce que j’ai trouvé.

La valeur data-offset-top est la quantité de pixels que vous devez faire défiler pour que l’effet d’apposition ait lieu. Dans votre cas, une fois que 50px est fait défiler, la classe de votre élément passe de .affix-top à .affix. Vous voudrez probablement définir data-offset-top à environ 130px dans votre cas d'utilisation.

Une fois que ce changement de classe a eu lieu, vous devez positionner votre élément dans css en nommant le positionnement pour la classe .affix. Bootstrap 2.1 définit déjà .affix en tant que position: fixed;; il ne vous reste donc qu'à ajouter vos propres valeurs de position.

Exemple:

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}
76
Dave Kiss

Pour résoudre ce problème, j'ai modifié le plug-in affix afin d'émettre un événement jQuery lorsqu'un objet est apposé ou non. 

Voici la demande de tirage: https://github.com/Twitter/bootstrap/pull/4712

Et le code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Et ensuite, attachez la barre de navigation:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>
5
Corbin U

Vous devez supprimer .affix() de votre script.

Bootstrap offre la possibilité d'accomplir des tâches soit via data-attributes, soit directement en JavaScript, la plupart du temps.

3
Patrick Laughlin

Je l'ai depuis le code source de twitterbootstrap et ça marche plutôt bien:

HTML:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

JS:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});
2
Jesus Rodriguez

Merci à Namuol et Dave Kiss pour la solution. Dans mon cas, j’ai eu un petit problème de hauteur et de largeur avec la barre de navigation lorsque j’utilisais afflix et collapse en même temps. Le problème avec la largeur peut être facilement résolu en héritant de l'élément parent (conteneur dans mon cas). De plus, je pouvais réussir à le réduire en douceur avec un peu de javascript (coffeescript en fait). L'astuce consiste à définir la hauteur de l'encapsuleur sur auto avant que le basculement ne se produise, puis à le corriger après.

Balisage (haml): 

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

Coffeescript:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()
1
Voldy

Il vous suffit de supprimer le script. Voici mon exemple:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>
1
Beckovsky

Semblable à la réponse acceptée, vous pouvez également faire quelque chose comme ceci pour tout faire en une fois:

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

Ceci invoque non seulement le plugin affix, mais enveloppe également l’élément apposé dans un div qui conserve la hauteur initiale de la barre de navigation.

0
Adrian

Ma solution pour attacher la barre de navigation:

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }
0
Florian