Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created January 31, 2016 04:00
Show Gist options
  • Save feo52/5633e47a37c3007586de to your computer and use it in GitHub Desktop.
Save feo52/5633e47a37c3007586de to your computer and use it in GitHub Desktop.
Download ZIP
sticky header with stickyfill.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.subject-title { background: LightPink; height: 400px; }
.sticky-header { background: LightBlue; height: 2em; }
.main-contents { background: Gainsboro; height:2000px; }
.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="subject-title">title </div>
<div class="sticky-header">header </div>
<div class="main-contents">contents</div>
<div class= "footer">footer </div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment