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 angehängten Navigationsleiste erzielen: Die Navigationsleiste befindet sich unter einer Absatz- / Seitenüberschrift. Beim Scrollen nach unten sollte zuerst gescrollt werden, bis der obere Rand der Seite erreicht ist, und dann für weitere Bildlaufvorgänge festgehalten werden .

Da jsFiddle nicht mit dem Navbar-Konzept funktioniert, habe ich eine separate Seite zur 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 data-offset-topden Wert 0 haben (da der Balken ganz oben "bleiben" sollte, aber bei 50 ist zumindest ein Effekt zu beobachten.

Wenn Sie auch den Javascript-Code einfügen:

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

Jede Hilfe geschätzt.

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

Geben Sie nicht data-offset-topin Ihrem HTML an. Geben Sie es stattdessen an, wenn Sie anrufen .affix():

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

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

Sie müssen das Element weiterhin mit CSS nach oben klemmen. Außerdem musste ich width: 100%das nav-Element setzen, da sich .navElemente position: fixedaus irgendeinem Grund schlecht benehmen:

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

Eine letzte Sache: Wenn ein angebrachtes Element fixiert wird, nimmt sein Element keinen Platz mehr auf der Seite ein, was dazu führt, dass die darunter liegenden Elemente "springen". Um diese Hässlichkeit zu verhindern, wickle ich die Navigationsleiste in eine ein, divderen Höhe ich zur Laufzeit so eingestellt habe, dass sie der Navigationsleiste entspricht:

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

.

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

Hier ist die obligatorische jsFiddle, um sie in Aktion zu sehen .

Ich habe dies gerade zum ersten Mal implementiert und hier ist, was ich gefunden habe.

Der data-offset-topWert ist die Anzahl der Pixel, die Sie scrollen müssen, damit der Fixierungseffekt stattfindet. In Ihrem Fall 50pxwird die Klasse Ihres Elements nach dem Scrollen von .affix-topauf geändert .affix. Sie möchten wahrscheinlich in Ihrem Anwendungsfall data-offset-topungefähr festlegen 130px.

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

Beispiel:

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

Um genau dieses Problem zu beheben, habe ich das Affix-Plugin so geändert, dass es ein jQuery-Ereignis ausgibt, wenn ein Objekt angebracht oder nicht angehängt wird.

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

Führen Sie dann die folgenden Schritte aus, um die Navigationsleiste anzubringen:

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

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

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

Bootstrap bietet die Möglichkeit, Dinge data-attributesmeistens entweder über oder direkt über JavaScript zu erledigen .

Ich habe dies aus dem Quellcode des Twitterbootstraps 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);
});

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>

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 Navigationsleiste, als ich Afflix- und Collapse-Plugins zusammen verwendete. Das Problem mit der Breite 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 ein bisschen Javascript (eigentlich Coffeescript) reibungslos zusammenbricht. Der Trick besteht darin, die Höhe des Wrappers auf autovor dem Umschalten des Zusammenbruchs einzustellen und danach wieder zu korrigieren.

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

Meine Lösung zum Anbringen der Navigationsleiste:

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

Ähnlich wie bei der akzeptierten 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()
  });
});​

Dadurch wird nicht nur das affixPlugin aufgerufen, sondern auch das angehängte Element in ein div eingeschlossen, das die ursprüngliche Höhe der Navigationsleiste beibehält.