FoundationPress add for sticky header. The header scroll off the page as normal but we use the $(window).scroll event to detect if it has scrolled off page and if it has we apply the css class 'fixed' to the header. The animation and header absolute positioning is then handled with css using keyframes, positioning and breakpoints.

_header-slide-down-sticky.scss

// Header fixed positioning and animation
header.site-header.fixed {
	position: fixed;
	top: 0;
	left: 0;
    right:0;
    transition: all 0.3s;
    transform: translateY(0);
    opacity: 0;
    $animation: move-down-fixed-header ease-in 0.3s normal forwards;
    -webkit-animation: $animation; /* Safari 4+ */
    -moz-animation:    $animation; /* Fx 5+ */
    -o-animation:      $animation; /* Opera 12+ */
    animation:         $animation; /* IE 10+, Fx 29+ */
    z-index: 100;
}
// Fixed header keyframes
$header-trans-y-start: translateY(-47px);
$header-trans-y-end: translateY(0);
@-webkit-keyframes move-down-fixed-header {
  0%   { opacity: 0; transform: $header-trans-y-start;}
  100% { opacity: 1; transform: $header-trans-y-end;}
}
@-moz-keyframes move-down-fixed-header {
  0%   { opacity: 0; transform: $header-trans-y-start;}
  100% { opacity: 1; transform: $header-trans-y-end;}
}
@-o-keyframes move-down-fixed-header {
  0%   { opacity: 0; transform: $header-trans-y-start;}
  100% { opacity: 1; transform: $header-trans-y-end;}
}
@keyframes move-down-fixed-header {
  0%   { opacity: 0; transform: $header-trans-y-start;}
  100% { opacity: 1; transform: $header-trans-y-end;}
}

// Default element styles
@media screen and #{breakpoint(large)} {
	div.top-bar-left {
		a[rel="home"] {
			font-size: 3rem;
		}
	}
	div.top-bar-right {
		padding: 1.5rem 0;
	}	
	// Fixed lement styles
	header.site-header.fixed {
		div.top-bar-left {
			a[rel="home"] {
				font-size: initial;
			}
		}
		div.top-bar-right {
			padding: initial;
		}
	}	
}

_sticky-headr.js

$(document).ready(function(){
	$(window).scroll(function (event) {
		var $header = $('header.site-header');
		var pos = 250;
	    var scroll = $(window).scrollTop();
	    if (scroll < pos && $header.hasClass('fixed')) {
	    	$header.removeClass('fixed').addClass('page-top'); 
	    }
	    if (scroll > pos && !$header.hasClass('fixed')) {
	    	$header.addClass('fixed').removeClass('page-top'); 
	    }
	});
});