Using fixed position with a grid layout framework

Question

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?

Phial

Answer 1

Seems to me that if you're going to have a component of the page that's fixed anyway, the easiest thing to do is just pull that div out of the 'Foundation' grid altogether. Then, outside of the grid, you can position it as fixed and it won't interact with the grid at all. If the menu itself also needs to be a flexible grid, make it one—just make it separate from the main grid.

Counter

Answer 2

Using javascript to solve a problem like this seems like overkill. I would try to keep to the basics by using Foundation's offset classes like this:

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

Hope this helps!

Traditor

this won't work. Say the screen size is 1200px. The page width is 1000px. If you apply a column class to a fixed element which gives say 10% width, then the fixed element will get a width of 10% of 1200px = 120px. This is because elements with position:fixed have their width calculated with respect to the viewport, not the parent divs. Whereas anything which is not fixed position will get a width of 10% of 1000px = 100px. – Cello

Answer 3

Using:

position: sticky;
top: 0;

inside the container worked for me.

It's described in detail in this article: Using Position Sticky With CSS Grid. (I've also saved it on the Wayback Machine.)

Bilection