body {
margin: 0;
}
header {
position: fixed;
padding: 3em 0;
width: 100%;
font-size: 2em;
text-align: center;
color: #fff;
background-color: #000;
transition: .3s;
}
main {
height: 2000px;
text-align: center;
background-color: #fff;
}
footer {
padding: 3em 0;
text-align: center;
color: #fff;
background-color: #000;
}
.is-animation {
padding: 2em 0;
font-size: 1em;
}
$(function() {
$(window).on('load scroll', function() {
var scrollPos = $(this).scrollTop();
if ( scrollPos > 100 ) {
$('header').addClass('is-animation');
} else {
$('header').removeClass('is-animation');
}
});
});
コンテンツ