Skip to content

Instantly share code, notes, and snippets.

@horne3754sg

horne3754sg/index.html

Created May 4, 2017 20:23
Show Gist options
  • Save horne3754sg/771ed5554cedb9669bda8dbf08c97135 to your computer and use it in GitHub Desktop.
Save horne3754sg/771ed5554cedb9669bda8dbf08c97135 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/xoxavuj
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.header-block {
display: block;
padding: 1em;
text-align: center;
background: #f2f2f2;
}
.menu {
display: block;
padding: 1em;
text-align: center;
background: #333;
color: #fff;
}
.menu.scroll {
background: #cc0000;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
}
.tall-block {
display: flex;
justify-content: center;
height: 2000px;
padding: 1em;
background: #fff;
}
</style>
</head>
<body>
<div class="header-block">Header</div>
<div id="main_menu" class="menu">a menu</div>
<div class="tall-block">Some content.</div>
<script id="jsbin-javascript">
(function() {
"use strict";
var last_known_scroll_position = 0;
var sticking = false;
var stickyEl = document.getElementById('main_menu');
var elOffset = stickyEl.offsetTop;
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (last_known_scroll_position > elOffset) {
if (sticking === true) {
return;
}
window.requestAnimationFrame(function() {
stickyEl.classList.add('scroll');
});
sticking = true;
console.log(sticking);
} else {
if (sticking === false) {
return;
}
stickyEl.classList.remove('scroll');
sticking = false;
console.log(sticking);
}
});
})();
</script>
<script id="jsbin-source-css" type="text/css">.header-block {
display: block;
padding: 1em;
text-align: center;
background: #f2f2f2;
}
.menu {
display: block;
padding: 1em;
text-align: center;
background: #333;
color: #fff;
}
.menu.scroll {
background: #cc0000;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
}
.tall-block {
display: flex;
justify-content: center;
height: 2000px;
padding: 1em;
background: #fff;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
(function() {
"use strict";
var last_known_scroll_position = 0;
var sticking = false;
var stickyEl = document.getElementById('main_menu');
var elOffset = stickyEl.offsetTop;
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (last_known_scroll_position > elOffset) {
if (sticking === true) {
return;
}
window.requestAnimationFrame(function() {
stickyEl.classList.add('scroll');
});
sticking = true;
console.log(sticking);
} else {
if (sticking === false) {
return;
}
stickyEl.classList.remove('scroll');
sticking = false;
console.log(sticking);
}
});
})();</script></body>
</html>
Raw
jsbin.xoxavuj.css
.header-block {
display: block;
padding: 1em;
text-align: center;
background: #f2f2f2;
}
.menu {
display: block;
padding: 1em;
text-align: center;
background: #333;
color: #fff;
}
.menu.scroll {
background: #cc0000;
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
}
.tall-block {
display: flex;
justify-content: center;
height: 2000px;
padding: 1em;
background: #fff;
}
Raw
jsbin.xoxavuj.js
(function() {
"use strict";
var last_known_scroll_position = 0;
var sticking = false;
var stickyEl = document.getElementById('main_menu');
var elOffset = stickyEl.offsetTop;
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (last_known_scroll_position > elOffset) {
if (sticking === true) {
return;
}
window.requestAnimationFrame(function() {
stickyEl.classList.add('scroll');
});
sticking = true;
console.log(sticking);
} else {
if (sticking === false) {
return;
}
stickyEl.classList.remove('scroll');
sticking = false;
console.log(sticking);
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment