Search code examples
css-positionzurb-foundationsidebar

Fixed Sidebar in zurb foundation

I am building a site using the foundation 4.0 framework

and I would like a fixed sidebar, similar to the Bootstrap Affix functionality.

Here is my example, I would like the right habd div.panel to be fixed. Fixing it via CSS however breaks the structure.

Has anyone done anything like this before? I've had a look at the Magellan addon to see if I can make sense of it but it looks like a different animal.

Solution

  • I think Magellan is your best bet if you want to stick with foundation only. While it isn't exactly the same it can be customized to provide similar functionality. In this issue tracker, awshout posts a fiddle as an example of a sticky sidebar. In the fiddle, he uses the tab class with his navigation. 

    <ul class="magellan tabs vertical" data-magellan-expedition="fixed">
  <li data-magellan-arrival="grid"><a href="#grid">Grid</a></li>
  <li data-magellan-arrival="tabs"><a href="#tabs">Tabs</a></li>
  <li data-magellan-arrival="buttons"><a href="#buttons">Buttons</a></li>
</ul>

    There's also some other good information in the tracker if you want a fixed side nav as well as a fixed header.

    Other than Magellan, you could try to use a third party plugin like stickyMojo.js