Simple Sticky Header
.* :☆゚
Yes, position:sticky
is a thing, but it’s not a well supported thing just yet. Luckily you can achieve the same effect with more control using a bit of JavaScript.
The JavaScript (using jQuery syntax)
//sticky header
$(window).scroll(function() {
var header = $('#header').height();
//this value can be changed to the height of any other element
//such as a hero image, depending on your website design
if ( $(window).scrollTop() > header ) {
$header.addClass('sticky');
} else {
$header.removeClass('sticky');
}
});
The (S)CSS
#header {
position: relative;
&.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}