在网格布局框架中使用固定位置 [英] Using fixed position with a grid layout framework

问题描述

因此，我正在创建一个网页，该网页的左侧菜单是固定的（当您上下滚动页面时，它们会跟随您）。我目前正在使用Grid布局：Foundation（由zurb创建） http://foundation.zurb.com/ docs / grid.php 。它使用十二列网格。我在定位固定布局并同时使用网格时遇到了问题。如何在页面上使用网格布局和固定元素？

So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a 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>

我能够使用此结构获得固定职位，但在某些情况下菜单变得太大，并与八列的内容重叠。我不知道是否有更好的方法？

I was able to get the fixed position to work using this structure but in some cases the contents of the menu grows too big and overlap the contents of the eight column. I dont know if there is a better way to doing this?

推荐答案

找到了这篇文章- ZURB + ScrollSpy 。在5分钟内即可正常运作。我发现将侧边栏内容包装在网格位置下方的scrollspy div中。

Found this article - ZURB + ScrollSpy. Got it working in 5 mins. What I found that wrapping the sidebar content in scrollspy div underneath the grid position.

这篇关于在网格布局框架中使用固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！