Fixe la barre latérale dans zurb foundation

Je suis en construction d'un site à l'aide de la fondation framework 4.0

et je voudrais une barre latérale fixe, semblable à la Bootstrap Apposer fonctionnalité.

Voici mon exemple, je voudrais que le droit habd div.panneau fixe. Fixation via CSS toutefois sauts de la structure.

Quelqu'un a fait quelque chose comme ça avant? J'ai eu un coup d'oeil à l'Magellan addon pour voir si je peux en comprendre le sens, mais il ressemble à un animal différent.

OriginalL'auteur Chris J Allen | 2013-06-04

  1. 3

    Je pense que Magellan est votre meilleur pari si vous voulez coller avec de la fondation.
    Alors que ce n'est pas exactement la même, il peut être adapté pour fournir des fonctionnalités similaires.
    Dans ce outil de suivi d', awshout postes un violon comme un exemple d'un collant de la barre latérale.
    En coulisse, il utilise l'onglet classe avec sa 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>

    Il y a aussi quelques autres bonnes informations dans le dispositif de suivi si vous voulez un côté fixe nav ainsi que d'un en-tête fixe.

    Autres que Magellan, vous pouvez essayer d'utiliser un plug-in tiers comme stickyMojo.js

    Le stickymojo lien est mort.
    Le stickymojo lien est maintenant de retour en vie.(Devrais-je croire en la réincarnation?)

    OriginalL'auteur philipcdavis

  2. 1

    Vous pouvez essayez de construire votre propre flottante de navigation. Ce code fonctionne pour moi:

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

    L'ajouter à votre custom fichier js et donner à la navigation floatingNav id

    Source: Comment Construire un Flottant de la Barre de Navigation

    PS: j'ai ajouté un couple de lignes dans le code initial, de sorte que la largeur de la barre latérale ne change pas. Supprimer/modifier de la façon que vous préférez.

    OriginalL'auteur Diliara

  3. 0

    Fondation vous offre les fixes de classe. Juste envelopper de votre navigation dans un div en utilisant les fixes de classe

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

    Vous pouvez alors préciser dans votre css la hauteur que vous voulez à partir du haut ou vers la gauche.

    #nav {
  top: 100px;
}
    Je n'ai jamais vu un fixe de classe au sein de la Fondation. Ce n'est pas dans leurs Global CSS mixin pour v4 - foundation.zurb.com/docs/components/global.html êtes-vous sûr que vous n'êtes pas en pensant à TopBar qui dispose d'une option pour le Fixe?
    Pas dans leur mixin, mais ils ont la classe pour une utilisation avec leur collant dessus de la valeur liquidative. github.com/zurb/foundation/blob/...

    OriginalL'auteur jameswilliamiii