Foundation Framework Sticky Topbar is not sticky

Question

I use the Foundation framework and I want the "top-bar" component to be sticky when the browser window touches the Navigation. The documentation shows an example called "Stick Top Bar".

Now I have build that Topbar exactly like the documentation shows, but it doesn´t work...

Here's the link to the page.

Anyone is able to see where I fail?

Answer 1

If you want your top-bar to be on the top and stick there, you need a position: fixed; . Then your top, left, right and bottom attributes will work and you will be able to put your navbar to the top by adding top:0;

 .sticky {
       top: 0;
       position: fixed;
    }

Add this javascript (assuming you have JQuery included)

$(window).scroll(function () {
    var $this = $(this),
        $head = $('.navigation');
    if ($this.scrollTop() > 1000) {
       $head.addClass('sticky');
    } else {
       $head.removeClass('sticky');
    }
});

You can adjust the position at which the bar pops up with $this.scrollTop() > yourvaluehere

JSFiddle