Использование фиксированной позиции с каркасом сетки - PullRequest
Новая
       9

Использование фиксированной позиции с каркасом сетки

8 голосов
/ 29 февраля 2012

Итак, я создаю веб-страницу, где меню с левой стороны фиксируются (они следуют за вами, когда вы прокручиваете страницу вверх и вниз).В настоящее время я использую макет Grid: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php., который использует сетку из двенадцати столбцов.У меня проблемы с позиционированием фиксированного макета и при этом все еще использую сетку.Как я могу использовать сетку и фиксированные элементы на странице? 

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

Мне удалось получить фиксированную позицию для работы с использованием этой структуры, но в некоторых случаях содержимое меню становится слишком большим и перекрываетсясодержимое восьми столбца.Я не знаю, есть ли лучший способ сделать это?

Ответы [ 3 ]

4 голосов
/ 20 ноября 2012

Нашел эту статью - ZURB + ScrollSpy . Все заработало за 5 минут. То, что я обнаружил, оборачивая содержимое боковой панели в scrollspy div под положением сетки.

3 голосов
/ 19 февраля 2013

Использование javascript для решения такой проблемы кажется излишним.Я бы попытался придерживаться основ, используя смещенные классы Foundation, например: 

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

Надеюсь, это поможет!

3 голосов
/ 21 марта 2012

Мне кажется, что если у вас все равно будет какой-то исправленный компонент страницы, проще всего просто вытащить этот div из сетки 'Foundation'. Затем, вне сетки, вы можете позиционировать ее как fixed, и она вообще не будет взаимодействовать с сеткой. Если само меню также должно быть гибкой сеткой, сделайте ее единственной - просто отделите ее от основной сетки.

...