Skip to content

Instantly share code, notes, and snippets.

@kuanb

kuanb/header.html

Created September 8, 2015 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuanb/60ee96d2e6c6e09b257a to your computer and use it in GitHub Desktop.
Save kuanb/60ee96d2e6c6e09b257a to your computer and use it in GitHub Desktop.
Download ZIP
Simple locked header with class toggle on scroll
Raw
header.html
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Only Dynamic Header</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style type="text/css">
body {
margin: 0px;
}
h2, p {
margin: 0px;
}
.header .lose {
padding: 15px;
height: 30px;
background-color: red;
}
.header .keep {
padding: 15px;
width: 100%;
background-color: rgb(255, 130, 0);
}
.keep.locked {
color: blue;
position: fixed;
top: 0px;
}
.body {
background-color: rgba(70, 200, 90, 0.4);
min-height: 1500px;
padding: 25px;
}
</style>
<body>
<div class="header">
<h2 class="lose">
Two part header
</h2>
<p class="keep" id="dynamicHeader">
Part of header to preserve
</p>
</div>
<div class="body">
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
</p>
<p>
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
</p>
<p>
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
</p>
<p>
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.
Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
</p>
<p>
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
</p>
<p>
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
</p>
<p>
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.
Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
</p>
<p>
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
</p>
<p>
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
</p>
<p>
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.
Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
</p>
<p>
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
</p>
<p>
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
</p>
<p>
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.
Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
</p>
<p>
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
</p>
<p>
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
</p>
<p>
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
<h2>
Foo bar
</h2>
<p>
Lorem ipsum dolor sit amet, ipsum homero sadipscing eum id, ea meis gloriatur mea. Alia mnesarchum suscipiantur cum ea. Eam ut dolores mandamus corrumpit, mei ne nibh denique salutandi. Ea ius mucius hendrerit. Audiam aeterno hendrerit vel an, his nibh dolorem an.
An quis convenire sit. Ex sit singulis signiferumque, eos in vitae accusamus hendrerit. Id sed dicta probatus. Eu mel albucius voluptatum assueverit, at postea minimum pertinax pri, enim dicat deterruisset vel ne. Sea ex eirmod melius, alia detracto has in.
Et solet nostro abhorreant sea, eu sit debet intellegat elaboraret. Ut legere eripuit mea, quidam reprehendunt has ei, eu ancillae intellegam vix. Posse dignissim te est, ut mei vero ludus accusamus. Quo elit facilisis ei.
Mei te utroque gubergren, in nam sonet putent, sint simul utamur ius ne. Aperiam epicurei cu vim, ad antiopam constituam duo. Duo delicata gloriatur ea, etiam accumsan argumentum vim ad, quo graeco civibus liberavisse ne. Timeam suscipit instructior sed in, dicta fabellas nec ei. Ei nec assum scaevola, nisl conclusionemque ei mei, quo diceret insolens ad. Pro in everti sensibus oportere.
Et legendos delicatissimi his, at est paulo suscipit. Et commune explicari eloquentiam sit. Nam eu falli theophrastus, ridens saperet signiferumque est te, his ut hinc graeco labores. Ad vix graeci melius splendide, an eum decore mediocritatem. Dolor vivendo mel ad, causae argumentum mel eu, mel ad modo noster.
</p>
</div>
</body>
<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 60){
$('#dynamicHeader').addClass("locked");
} else {
$('#dynamicHeader').removeClass("locked");
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment