Fixed Sidebar in zurb foundation

Question

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 1

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

Solution 2

You can try building your own floating navigation. This code works for me:

$("document").ready(function(e) {        

    $("#floatingNav").css("z-index", "99999").css("right", "0").css("position", "absolute");

    // get initial top offset of navigation 
    var floating_navigation_offset_top = $('#floatingNav').offset().top;

    // define the floating navigation function
    var floating_navigation = function(){

        // current vertical position from the top
        var scroll_top = $(window).scrollTop(); 

        // if scrolled more than the navigation, change its 
        // position to fixed to float to top, otherwise change 
        // it back to relative
        if (scroll_top > floating_navigation_offset_top) { 
            $('#floatingNav').css({ 'position': 'fixed', 'top':0, 'right': $('h4.titleImage').offset().left, 'width': 158 });
        } else {
            $('#floatingNav').css({ 'position': 'relative', 'right':0, 'width':158 }); 
        }   
    };

    // run function on load
    floating_navigation();

    // run function every time you scroll
    $(window).scroll(function() {
        floating_navigation();
    });
});

Add that to your custom js file and give the navigation floatingNav id

Source: How to Build a Floating Navigation Bar

PS: I have added a couple of lines to the original code, so that the width of the sidebar doesn't change. Remove/change it the way your prefer.