JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.2.3/css/foundation.min.css">
<script src="//cdn.jsdelivr.net/zepto/1.0rc1/zepto.min.js"></script>
<script src="https://raw.github.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.github.com/zurb/foundation/master/js/foundation/foundation.topbar.js"></script>
<body>
<div class='contain-to-rid stcky'>
<nav class='top-bar'>
<ul class='title-area'>
<li class='name'>
<h1>
<a href='#'>
Logo
</a>
</h1>
</li>
</ul>
</nav>
</div>
<div class='row'>
<div class='cuisines large-6 columns complementary'>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 1
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 2
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 3
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 4
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 5
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 6
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 7
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 8
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 9
</div>
</div>
<div class='row'>
<div class='cuisine large-12 columns'>
Item 10
</div>
</div>
...
CSS
.sticky{
position:fixed;
z-index:999;
}
.cuisine {
margin-top:50px;
}