body {
margin: 0;
}
header {
padding: 3em 0;
text-align: center;
color: #fff;
background-color: #000;
}
nav {
padding: 3em 0;
text-align: center;
color: #fff;
background-color: #444;
}
main {
height: 2000px;
text-align: center;
background-color: #fff;
}
footer {
padding: 3em 0;
text-align: center;
color: #fff;
background-color: #000;
}
.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
$(function() {
var navHeight = $('nav').outerHeight(),
navPos = $('nav').offset().top;
$(window).on('load scroll', function() {
var scrollPos = $(this).scrollTop();
if ( scrollPos > navPos ) {
$('nav').addClass('is-fixed');
$('main').css('margin-top', navHeight);
} else {
$('nav').removeClass('is-fixed');
$('main').css('margin-top', '0');
}
});
});
コンテンツ