Использование фиксированного положения с каркасной сеткой

Question

Итак, я создаю веб-страницу, на которой закреплены меню с левой стороны (они следуют за вами, когда вы пролистаете вверх и вниз по странице). В настоящее время я использую компоновку сетки: 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> 

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

Answer 1

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

Answer 2

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

Answer 3

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

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

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