Utilisation de la position fixe avec un cadre de mise en page de la grille

Question

Je crée donc une page Web, où les menus sur le côté gauche sont fixés (ils vous suivent lorsque vous faites défiler de haut en bas la page). J'utilise actuellement la disposition de la grille: Foundation (par zurb) http://foundation.zurb.com/docs/grid.php. Qui utilise une grille de douze colonnes. J'ai des problèmes de positionnement de la disposition fixe et j'utilise toujours la grille en même temps. Comment puis-je utiliser une disposition de grille et des éléments fixes sur une page?

<div class="container">
   <div class="row">
        <div class="four columns relativePosition">
              <div class="fixedPosition">
                   <div class="four columns">
                        Menu Here
                   </div>
              </div>
        </div>
        <div class="eight columns">
              Other Content
        </div>
   </div>
</div>

J'ai pu faire fonctionner la position fixe en utilisant cette structure, mais dans certains cas, le contenu du menu devient trop grand et chevauche le contenu de la colonne huit. Je ne sais pas s'il existe une meilleure façon de faire cela?

Answer 1

J'ai trouvé cet article - Zurb + scrollspy. Je l'ai fait fonctionner en 5 minutes. Ce que j'ai trouvé qui enveloppe le contenu de la barre latérale dans ScrollSpy Div sous la position de la grille.

Answer 2

Utiliser JavaScript pour résoudre un problème comme celui-ci semble être exagéré. J'essaierais de garder les bases en utilisant des classes de décalage de Foundation comme ceci:

<div class="row twelve columns">
  <div class="two columns" style="position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;">
    Menu
    <ul><li>Menu Item</li></ul>
  </div>
  <div class="ten columns offset-by-two">
    Content goes here
  </div>
</div>

J'espère que cela t'aides!

Answer 3

Il me semble que si vous voulez avoir un composant de la page qui est corrigé de toute façon, la chose la plus facile à faire est de tirer ça div hors de la grille «fondation» complètement. Ensuite, en dehors de la grille, vous pouvez le positionner comme fixed Et cela n'interagira pas du tout avec la grille. Si le menu lui-même doit également être une grille flexible, faites-en une, faites-la simplement séparée de la grille principale.