1

I'm trying to create a layout using foundation where both my nav and my sidebars are fixed as your scroll the page, but the main content is not. Here is my layout: https://i.stack.imgur.com/G2obx.png

I'd like the middle content to scroll with the page, but the sidebars and the nav bar to stay fixed as you scroll.

I've been trying to accomplish this with Magellan and Foundation 5, but everytime I attempt to add the 

data-magellan-expedition="fixed"

attribute to my sidebars or my header, it completely pops out of the grid and gives the element far too much width. Could someone please explain how to accomplish this?

j0k
  • 22,600
  • 28
  • 79
  • 90
user3179835
  • 11
  • 1
  • Did you try CSS position:fixed? – Alex Shilman Jan 10 '14 at 00:42
  • position:fixed pulls the column out of the row. I tried moving it around with top: and left: at that point, but it's position was dependent on screen width - so it would be in a different position depending on screen size. – user3179835 Jan 10 '14 at 18:07
  • So why dont you change the css attributes with javascript. Like if your scroll to the top, then make the side bars position:fixed, with top and left of the current position of the sidebars. Then if you scroll down past a certain point, then it gets back to its original. Does that make sense? – Alex Shilman Jan 10 '14 at 19:35

0 Answers0