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
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
@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; | |
} | |
} |
// 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)); | |
}); | |
}); |