Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created January 31, 2016 04:00
Show Gist options
  • Save feo52/5bfd50cbccfb34b47f03 to your computer and use it in GitHub Desktop.
Save feo52/5bfd50cbccfb34b47f03 to your computer and use it in GitHub Desktop.
Download ZIP
sticky header & sticky footer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin:0; padding:0; }
.above-ankle { min-height: calc(100vh - 2em); }
.subject-title { background: LightPink; height: 200px; }
.sticky-header { background: LightBlue; height: 2em; }
.main-contents { background: Gainsboro; height: 600px; }
.sticky-footer { background: LimeGreen; height: 2em; }
.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.3/stickyfill.min.js"></script>
<script>
$(function(){
$('.sticky-header').Stickyfill();
});
</script>
</head>
<body>
<div class="above-ankle">
<div class="subject-title">title</div>
<div class="sticky-header">sticky header</div>
<div class="main-contents">change window-size.<br />change scrollbar-position.<br /></div>
</div>
<div class="below-ankle">
<div class="sticky-footer">sticky footer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment