Feste Seitenleiste in zurb foundation

Ich bin erstellen einer Website mithilfe des foundation framework 4.0

und ich möchte eine Feste Seitenleiste, ähnlich wie die Bootstrap Affix Funktionalität.

Hier ist mein Beispiel, ich möchte das Recht heißläuferortungsanlage (habd) div.panel behoben werden. Befestigung via CSS jedoch bricht die Struktur.

Hat jemand etwas derartiges getan? Ich habe einen Blick auf die Magellan-addon, um zu sehen, wenn ich kann den Sinn dahinter aber es sieht aus wie ein anderes Tier.

InformationsquelleAutor Chris J Allen | 2013-06-04

  1. 3

    Ich denke Magellan ist Ihre beste Wette, wenn Sie wollen stick mit foundation nur.
    Während es ist nicht genau das gleiche, es kann angepasst werden, um ähnliche Funktionalität bieten.
    In diesem issue-tracker, awshout Beiträge ein fiddle als ein Beispiel für einen sticky-sidebar.
    In der fiddle, verwendet er die Registerkarte Klasse mit seiner navigation. 

    <ul class="magellan tabs vertical" data-magellan-expedition="fixed">
  <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li>
  <li data-magellan-arrival="tabs"><a href="#tabs">Tabs</a></li>
  <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li>
</ul>

    Es gibt auch einige andere gute Informationen im tracker-wenn Sie möchten, eine Feste Seite nav sowie einem festen header.

    Andere als Magellan, könnten Sie versuchen, verwenden Sie eine Drittanbieter-plugin wie stickyMojo.js

    Die stickymojo link ist nun tot.
    Die stickymojo link ist jetzt wieder lebendig.(Sollte ich glaube an die Reinkarnation jetzt?)

    InformationsquelleAutor philipcdavis

  2. 1

    Können Sie versuchen, den Aufbau Ihrer eigenen floating navigation. Dieser code funktioniert bei mir:

    $("document").ready(function(e) {        

    $("#floatingNav").css("z-index", "99999").css("right", "0").css("position", "absolute");

    //get initial top offset of navigation 
    var floating_navigation_offset_top = $('#floatingNav').offset().top;

    //define the floating navigation function
    var floating_navigation = function(){

        //current vertical position from the top
        var scroll_top = $(window).scrollTop(); 

        //if scrolled more than the navigation, change its 
        //position to fixed to float to top, otherwise change 
        //it back to relative
        if (scroll_top > floating_navigation_offset_top) { 
            $('#floatingNav').css({ 'position': 'fixed', 'top':0, 'right': $('h4.titleImage').offset().left, 'width': 158 });
        } else {
            $('#floatingNav').css({ 'position': 'relative', 'right':0, 'width':158 }); 
        }   
    };

    //run function on load
    floating_navigation();

    //run function every time you scroll
    $(window).scroll(function() {
        floating_navigation();
    });
});

    Hinzufügen, um Ihre benutzerdefinierten js-Datei, und geben Sie die navigation floatingNav id

    Quelle: Wie man eine Floating Navigation Bar

    PS: ich habe ein paar Zeilen zu dem ursprünglichen code, so dass die Breite der sidebar nicht ändern. Entfernen/ändern Sie die Art und Weise Ihre Liebsten.

    InformationsquelleAutor Diliara

  3. 0

    Stiftung bietet Ihnen mit dem festen Klasse. Nur wickeln Sie Ihre Seite nav in ein div mit der festen Klasse

    <div id="nav" class="fixed">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

    Können Sie dann angeben in der css die Höhe, die Sie wollen es von oben oder eine position nach Links.

    #nav {
  top: 100px;
}
    Ich habe noch nie eine Feste Klasse innerhalb der Stiftung. Es ist nicht in Ihren Globalen CSS-Mixins in Verbindung für v4 - - foundation.zurb.com/docs/components/global.html sind Sie sicher, dass Sie nicht denken, TopBar, welche eine option für die Feste?
    Nicht in Ihre Globale Mixins in Verbindung, aber Sie haben die Klasse für die Verwendung mit Ihrem klebrigen top nav. github.com/zurb/foundation/blob/...

    InformationsquelleAutor jameswilliamiii

Schreibe einen Kommentar