Example needed for basic layout with sticky header and footer

I’ve been spending days trying to achieve something that should be very basic. I really want to use Foundation to make this happen instead of custom CSS.
All I am looking for is this:

A sticky header with the off canvas open/close button
Below it a main content with lots of text so the page will scroll
Sticky footer at the bottom
An off canvas to pull from the left and to move the main content section and the footer to the right, but appear below the header, which should not move.

Or visually, when the off canvas is closed:

{-} HEADER
  Scrolling
  content
Footer

When content is scrolled:

{-} HEADER
  content
  scrolled
Footer

When off canvas is open:

{X} HEADER
OFF -CANVAS 	|   content
				|   scrolled
				| Footer

I can share my code so far, but I don’t think it will help.
If someone who knows foundation can create a simple codepen with a working example using the XY Grid, that would be so incredible and very much appreciated.