README.md

Sticky Header with Slide-Down/Slide-Up

Sticky header with slide down and up effect for use with FoundastionPress.

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb https://foundationpress.olefredrik.com

_wp-swift-stick-header.scss

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}
header.site-header.clone {
    display: none; 
    position:fixed;
    top:-200px;
    left: 0;
    right: 0;
    z-index:999;
    @include transition(0.4s top cubic-bezier(.3,.73,.3,.74));
}
body.down header.site-header.clone {
    top:0;
}
@media screen and #{breakpoint(medium)} {
    header.site-header.clone {
        display: block;
    }   
}

wp-swift-stick-header.js

// https://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down
// http://jsfiddle.net/ianclark001/wELFH/147/
$(document).ready(function() {
    var $header = $("header.site-header");
    var $clone = $header.before($header.clone().addClass("clone"));
    
    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log('fromTop', fromTop);
        $("body").toggleClass("down", (fromTop > 800));
    });
});