Come utilizzare il nuovo plug-in di affisso nel bootstrap 2.1.0 di Twitter?

La documentazione bootstrap su questo argomento è un po 'confusa per me. Voglio ottenere un comportamento simile come nei documenti con l'apposizione barra di navigazione: la barra di navigazione si trova sotto un'intestazione di paragrafo / pagina e, scorrendo verso il basso, dovrebbe prima scorrere fino a raggiungere la parte superiore della pagina, quindi rimanere fissata lì fissa per ulteriori scorrimenti .

Poiché jsFiddle non funziona con il concetto di barra di navigazione, ho impostato una pagina separata da utilizzare come esempio minimo: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Lo uso come barra di navigazione:

<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 -->

Penso che vorrei data-offset-topessere di valore 0 (poiché la barra dovrebbe "restare" in alto "ma con 50 c'è almeno qualche effetto guardabile.

Se inserisci anche il codice javascript:

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

Qualsiasi aiuto apprezzato.

Avevo un problema simile e credo di aver trovato una soluzione migliore.

Non preoccuparti di specificare data-offset-topnel tuo HTML. Invece, specificalo quando chiami .affix():

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

Il vantaggio qui è che puoi modificare il layout del tuo sito senza dover aggiornare l' data-offset-topattributo. Poiché utilizza la posizione calcolata effettiva dell'elemento, previene anche incongruenze con i browser che rendono l'elemento in una posizione leggermente diversa.

Sarà comunque necessario bloccare l'elemento in alto con CSS. Inoltre, ho dovuto impostare width: 100%l'elemento nav poiché gli .navelementi con un position: fixedcomportamento anomalo per qualche motivo:

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

Un'ultima cosa: quando un elemento apposto diventa fisso, il suo elemento non occupa più spazio sulla pagina, provocando il "salto" degli elementi sottostanti. Per evitare questa bruttezza, avvolgo la barra di navigazione in una la divcui altezza ho impostato essere uguale alla barra di navigazione in fase di esecuzione:

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

.

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

Ecco il jsFiddle obbligatorio per vederlo in azione .

L'ho appena implementato per la prima volta ed ecco cosa ho trovato.

Il data-offset-topvalore è la quantità di pixel che è necessario scorrere affinché abbia luogo l'effetto di apposizione. Nel tuo caso, una volta fatto 50pxscorrere, la classe sul tuo elemento viene modificata da .affix-topa .affix. Probabilmente vorrai impostare data-offset-topcirca 130pxnel tuo caso d'uso.

Una volta che si verifica questo cambio di classe, devi posizionare il tuo elemento in css definendo il posizionamento per la classe .affix. Bootstrap 2.1 definisce già .affixcome position: fixed;modo tutto quello che dovete fare è aggiungere i propri valori di posizione.

Esempio:

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

Per risolvere questo problema, ho modificato il plug-in affix per emettere un evento jQuery quando un oggetto è apposto o non apposto.

Ecco la richiesta di pull: https://github.com/twitter/bootstrap/pull/4712

E il codice: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

E poi fallo per collegare la barra di navigazione:

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

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

Devi rimuovere .affix()dal tuo script.

Bootstrap offre la possibilità di realizzare cose tramite data-attributeso direttamente JavaScript la maggior parte del tempo.

L'ho preso dal codice sorgente di twitterbootstrap e funziona abbastanza bene:

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);
});

Hai solo bisogno di rimuovere lo script. Ecco il mio esempio:

<!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>

Grazie a namuol e Dave Kiss per la soluzione. Nel mio caso ho avuto un piccolo problema con l'altezza e la larghezza della barra di navigazione quando ho usato afflix e collapse plugin insieme. Il problema con la larghezza può essere facilmente risolto ereditandolo dall'elemento genitore (container nel mio caso). Inoltre sono riuscito a farlo collassare senza problemi con un po 'di javascript (coffeescript in realtà). Il trucco è impostare l'altezza dell'involucro su autoprima che si verifichi l'attivazione / disattivazione del collasso e correggerla dopo.

Markup (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()

La mia soluzione per collegare la barra di navigazione:

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();
        });
 }

Simile alla risposta accettata, puoi anche fare qualcosa come il seguente per fare tutto in una volta:

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

Questo non solo richiama il affixplugin, ma avvolge anche l'elemento apposto in un div che manterrà l'altezza originale della barra di navigazione.