web-dev-qa-db-de.com

Wie verwende ich das neue Affix-Plugin in Twitter's Bootstrap 2.1.0?

Die Bootstrap-Dokumentation zu diesem Thema ist für mich etwas verwirrend. Ich möchte ein ähnliches Verhalten wie in den Dokumenten mit der Affix-Navigationsleiste erreichen: Die Navigationsleiste befindet sich unter einer Absatz-/Seitenüberschrift. Wenn Sie nach unten scrollen, sollten Sie zunächst bis zum Anfang der Seite scrollen und dann für weitere Bildlaufschritte fixiert bleiben .

Da jsFiddle nicht mit dem Navbar-Konzept funktioniert, habe ich eine separate Seite für die Verwendung als minimales Beispiel eingerichtet: http://i08fs1.ira.uka.de/~s_drr/navbar.html

Ich benutze dies als meine Navigationsleiste:

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

Ich denke, ich möchte, dass data-offset-top den Wert 0 hat (da der Balken "ganz nach oben" bleiben soll), aber bei 50 ist zumindest ein gewisser Effekt zu beobachten.

Wenn auch der Javascript-Code eingefügt werden:

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

Jede Hilfe geschätzt.

csscss3webtwitter-bootstrapnavbar
110
Dynalon

Ich hatte ein ähnliches Problem und glaube, ich habe eine verbesserte Lösung gefunden.

Geben Sie nicht data-offset-top in Ihrem HTML-Code an. Geben Sie es stattdessen an, wenn Sie .affix() aufrufen:

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

Der Vorteil hierbei ist, dass Sie das Layout Ihrer Site ändern können, ohne das data-offset-top-Attribut aktualisieren zu müssen. Da hierbei die tatsächlich berechnete Position des Elements verwendet wird, werden auch Inkonsistenzen mit Browsern verhindert, die das Element an einer etwas anderen Position darstellen.

Sie müssen das Element immer noch mit CSS an der Spitze festklemmen. Außerdem musste ich width: 100% für das nav-Element festlegen, da .nav-Elemente aus position: fixed-Gründen aus irgendeinem Grund fehlerhaft sind:

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

Eine letzte Sache: Wenn ein fixiertes Element fixiert wird, nimmt sein Element auf der Seite keinen Platz mehr ein, sodass die darunter liegenden Elemente "springen". Um diese Hässlichkeit zu verhindern, wickle ich die Navbar in eine div ein, deren Höhe ich zur Laufzeit gleich der Navbar eingestellt habe:

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

.

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

Hier ist das obligatorische jsFiddle, um es in Aktion zu sehen .

160
namuol

Ich habe das erstmal zum ersten Mal implementiert und hier ist was ich gefunden habe.

Der data-offset-top-Wert ist die Anzahl der Pixel, die Sie scrollen müssen, damit der Anheftungseffekt stattfindet. In Ihrem Fall wird nach dem Scrollen von 50px die Klasse in Ihrem Artikel von .affix-top in .affix geändert. Sie möchten data-offset-top wahrscheinlich in Ihrem Anwendungsfall auf ungefähr 130px setzen.

Sobald diese Klassenänderung erfolgt ist, müssen Sie Ihr Element in css positionieren, indem Sie die Positionierung für die Klasse .affix gestalten. Bootstrap 2.1 definiert .affix bereits als position: fixed;, so dass Sie lediglich Ihre eigenen Positionswerte hinzufügen müssen.

Beispiel:

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

Um dieses Problem zu beheben, habe ich das Affix-Plugin so geändert, dass ein jQuery-Ereignis ausgegeben wird, wenn ein Objekt verbunden oder nicht verbunden ist. 

Hier ist die Pull-Anfrage: https://github.com/Twitter/bootstrap/pull/4712

Und der Code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

Und dann tun Sie dies, um die Navbar anzuhängen:

<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

Sie müssen .affix() aus Ihrem Skript entfernen.

Bootstrap bietet die Möglichkeit, die meiste Zeit über data-attributes oder direktes JavaScript zu erledigen.

3
Patrick Laughlin

Ich habe dies aus dem Quellcode von twitterbootstrap bekommen und es funktioniert ziemlich gut:

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

Vielen Dank an namuol und Dave Kiss für die Lösung. In meinem Fall hatte ich ein kleines Problem mit der Höhe und Breite der Navbar, wenn ich Afflix- und Collapse-Plugins zusammen verwendete. Das Problem mit width kann leicht gelöst werden, indem es vom übergeordneten Element (in meinem Fall Container) geerbt wird. Ich könnte es auch schaffen, dass es mit etwas Javascript (kaffeeScript eigentlich) reibungslos zusammenbricht. Der Trick besteht darin, die Wrapper-Höhe auf auto zu setzen, bevor der Umschalter zum Einklappen auftritt, und ihn danach wieder zu korrigieren.

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

Kaffeescript:

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

Sie müssen nur das Skript entfernen. Hier ist mein Beispiel:

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

Ähnlich wie die akzeptierte Antwort können Sie auch Folgendes tun, um alles auf einmal zu erledigen:

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

Dies ruft nicht nur das affix-Plugin auf, sondern bindet auch das angefügte Element in ein div ein, das die ursprüngliche Höhe der Navigationsleiste beibehält.

0
Adrian

Meine Lösung zum Anhängen der Navbar:

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