Bootstrap - Komponente anbringen

Mit dem Plugin zum Anhängen kann ein <div> an einer Stelle auf der Seite angebracht werden. Mit diesem Plugin können Sie das Fixieren auch ein- und ausschalten. Ein häufiges Beispiel hierfür sind soziale Symbole. Sie beginnen an einer Stelle, aber wenn die Seite eine bestimmte Markierung erreicht, wird das <div> an Ort und Stelle gesperrt und hört auf, mit dem Rest der Seite zu scrollen.

Wenn Sie diese Plugin-Funktionalität einzeln einbinden möchten, benötigen Sie die affix.js. Else, wie im Kapitel erwähnt Bootstrap - Komponenten Übersicht können Sie die umfassen bootstrap.js oder die minimierte bootstrap.min.js .

Verwendung

Sie können das Affix-Plugin über Datenattribute oder manuell mit Ihrem eigenen JavaScript verwenden, wie unten beschrieben.

  • Via data attributes - Zum einfachen Hinzufügen von Verhalten zu jedem Element hinzufügen, einfach hinzufügen data-spy = "affix"zu dem Element, das Sie ausspionieren möchten. Verwenden Sie Offsets, um zu definieren, wann das Fixieren eines Elements umgeschaltet werden soll.

Beispiel

Das folgende Beispiel zeigt die Verwendung anhand von Datenattributen:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. </p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>
  • Via JavaScript - Sie können ein Element manuell mit JavaScript anbringen, wie unten gezeigt

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

Beispiel

Das folgende Beispiel zeigt die Verwendung anhand von Datenattributen:

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>
   
   <div>
	
      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>
      
      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>
			
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.</p>
				
         <p>Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>
				
         <hr>
         
         <h2 id = "two">Tutorial Two</h2>
			
         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.</p>
				
         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.</p>
				
         <hr>
         
         <h2 id = "three">Tutorial Three</h2>
			
         <p>Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.</p>
				
         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.</p>
				
         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
</script>

Positionierung über CSS

In beiden oben genannten Situationen müssen Sie CSS für die Positionierung Ihrer Inhalte bereitstellen. Das Plugin wechselt zwischen drei Klassen, die jeweils einen bestimmten Status darstellen - .affix, .affix oben und unten .affix . Führen Sie die folgenden Schritte aus, um Ihre CSS-Nutzung für eine der oben genannten Optionen festzulegen.

  • Zu Beginn fügt das Plugin hinzu .affix-topum anzuzeigen, dass sich das Element in der obersten Position befindet. Zu diesem Zeitpunkt ist keine CSS-Positionierung erforderlich.

  • Wenn Sie über das Element hinausblättern, das Sie anbringen möchten, sollte das eigentliche Anbringen ausgelöst werden. Das ist wo.affix ersetzt .affix-top und setzt position: fixed; (Bereitgestellt durch Bootstraps Code CSS).

  • Wenn ein unterer Versatz definiert ist, sollten Sie einen Bildlauf durchführen, der ersetzt werden soll .affix mit .affix-bottom. Da Offsets optional sind, müssen Sie für die Einstellung eins das entsprechende CSS festlegen. In diesem Fall fügen Sie hinzuposition: absolute; wenn nötig.

Optionen

Es gibt bestimmte Optionen, die über Datenattribute oder JavaScript übergeben werden können, wie in der folgenden Tabelle aufgeführt.

Namensoption Typ / Standardwert Name des Datenattributs Beschreibung
Versatz Nummer | Funktion | Objekt Standard: 10 -versatzdaten Von den Bildschirmpixeln zum Versatz bei der Berechnung der Bildlaufposition. Wenn eine einzelne Zahl angegeben wird, wird der Versatz sowohl in der oberen als auch in der unteren Richtung angewendet. Um einen eindeutigen unteren und oberen Versatz bereitzustellen, geben Sie einfach einen Objektversatz an: {top 10} oder Offset: {top 10, bottom: 5}. Verwenden Sie eine Funktion, wenn Sie einen Versatz dynamisch berechnen müssen.