Skip to content

Instantly share code, notes, and snippets.

@hcharley

hcharley/1. template.html

Last active June 25, 2017 08:18
Show Gist options
  • Save hcharley/c7c040cc7f3c9fcc5db436fb841d7f63 to your computer and use it in GitHub Desktop.
Save hcharley/c7c040cc7f3c9fcc5db436fb841d7f63 to your computer and use it in GitHub Desktop.
Download ZIP
Stickied nav bar
Raw
1. template.html
<header>
<div class="never-ever">
</div>
<div class="left-behind">
</div>
<div class="carried-onward">
</div>
</header>
<h1>
Around the world in 30 days
</h1>
Raw
2. style.scss
body {
height: 1000px;
margin:0;
position: relative;
}
header {
width: 100%;
.never-ever {
background: #ccc;
width: 100%;
height: 100px;
}
.left-behind {
width: 100%;
}
.carried-onward {
background: #999;
width: 100%;
height: 40px;
}
&.up-up-and-away .carried-onward {
position: fixed;
top: 0;
}
}
Raw
3. script.js
var header = document.querySelector("header");
var neverEver = header.querySelector(".left-behind");
var leftBehind = header.querySelector(".left-behind");
var carriedOnward = header.querySelector(".carried-onward");
var handleScroll = function() {
var elOffset = leftBehind.offsetTop;
var scrollOffset = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
if(scrollOffset > elOffset) {
leftBehind.style.height = carriedOnward.offsetHeight + 'px';
header.classList.add('up-up-and-away');
} else {
header.classList.remove('up-up-and-away');
leftBehind.style.height = 'auto';
}
}
window.addEventListener('scroll', handleScroll);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment