sticky top navigation bar foundation 6

Question

http://codepen.io/cigol/pen/reVMaK

<div class="row fullWidth" data-sticky-container>
 <div class="large-12 columns header-row sticky" data-sticky data-margin-top="0">
  <div class="small-4 columns">
   <img src="https://placehold.it/250x100">
  </div>
  <div class="small-8">
  </div>
 </div>
</div>

Here is the code I'm using, it's foundation 6 base, I want to have a sticky top bar that is responsive and resizes. I'm trying to code my own only because when I cut and paste the examples they don't work (they all cluster into the top left of the screen for some reason).

I haven't altered the base files and the only overriding/additional css I'm using is in the codepen css.

I'm not sure why but the sticky'ness doesn't work on codepen, but works on my local browser.

Anyway you can see what I'm trying to do I hope. Nothing complicated. Just it isn't working fully. On my pc locally it works but when I scroll back upwards once it hits the top the background colour grey flashes off, and if I scroll back down it comes back again. I've tried in chrome and firefox and get the same result.

Any assistance is appreciated.

Answer 1

Need to include:

$(document).foundation();

To initialize the Foundation javascript so that the sticky navigation works.