Adding ScrollOut animation to headings using CSS and JS - javascript

This Codepen script uses SCSS to acheive animation to headings during scrolling of the webpage.
I converted it to CSS format and it does not seems to be working when added to a website - W3Spaces Page Output. Is it possible to get the effect with CSS?
<!DOCTYPE html>
<html>
<head><style>
h1.splitting {
color: #84a8ff;
}
h1.splitting .char {
transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
transition-delay: calc(20ms * var(--char-index));
}
h1.splitting[data-scroll="out"] .char {
opacity: 0.1;
transform: translateY(0.25em);
}
</style>
<script type="text/javascript">
Splitting();
ScrollOut({
targets: 'h1,h2,h3,h4'
});
</script>
</head>
<div class="page">
<h1 data-splitting>ScrollOut + Splitting.js</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<h1 data-splitting>Triggering Splitting Animations on Scroll</h1>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<h1 data-splitting>Add a <code>transition</code> to your splits (<code>.char</code> for example)</h1>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
<h1 data-splitting>Target <code>[data-scroll="out"]</code> for the default state</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<h1 data-splitting>That's about it!</h1>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
<h1 data-splitting>For real. It's easy!</h1>
<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
</div>
<script>
Splitting();
ScrollOut({
targets: 'h1,h2,h3,h4'
});
</script>
</body>
</html>
However, I have changed the JS code to just target all the headings:
ScrollOut({
targets: 'h1,h2,h3,h4'
});
The SCSS also converted into CSS.
But the code is not working.


You missed external CSS and Js library call,
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css' type='text/css' />
<style>
h1.splitting {
color: #84a8ff;
}
h1.splitting .char {
transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
transition-delay: calc( 20ms * var(--char-index) );
}
h1.splitting[data-scroll=out] .char {
opacity: 0.1;
transform: translateY(0.25em);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.js"></script>
<script src="https://unpkg.com/scroll-out/dist/scroll-out.js"></script>
Then, use it's method/options
<script>
Splitting();
ScrollOut({
targets: '[data-splitting]'
});
</script>


you need to add these resources for it to work the way you want
EXTERNAL CSS
css resource
EXTERNAL JAVASCRIPT
js resource#1
js resource#2

Related

How to delete a div that meets another div

I would like to be able to hide a div that meets another in JavaScript.
I found this code but I can't adjust the distance between the red and green div. I need to put a lot of content between the green div and the red div.
In this code the red div disappears when it comes into contact with the green one
window.onscroll = function() {
cacherHeader()
};
var header = document.getElementById("header");
var essai = document.getElementById("essai");
var position_essai = essai.offsetTop;
function cacherHeader() {
if (window.pageYOffset <= position_essai) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
height: 200px;
padding-top: 20px;
}
#essai {
background-color: green;
}
#conteneur_02 {
height: 1500px;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">conteneur 1</div>
<div id="essai">Essai</div>
<div id="conteneur_02">conteneur 2</div>

The code you use has nothing to do with "two divs meeting". The #header disappears when the window.pageYOffset is greater than the offsetTop of the #essai.
This means that you can have any length content between the two - it just simply updates the value when the #header classes are toggled.
I updated the snippet: removed the values that set the height of the containers from the CSS - now they stretch with the content.
Also, added a function to get the current offsetTop of an element - otherwise the values would be recalculated only on page refresh and not on if the window width (thus the container widths) changes.
window.onscroll = function() {
cacherHeader()
};
function getOffsetTop(el) {
return el.offsetTop
}
const header = document.getElementById("header");
const essai = document.getElementById("essai");
function cacherHeader() {
if (window.pageYOffset <= getOffsetTop(essai)) {
if (header.classList.contains("afficher") == false) {
header.classList.remove("cacher");
header.classList.add("afficher");
}
} else {
if (header.classList.contains("afficher") == true) {
header.classList.remove("afficher");
header.classList.add("cacher");
}
}
}
.fixe {
position: fixed;
}
.afficher {
opacity: 1;
visibility: visible;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
.cacher {
opacity: 0;
visibility: hidden;
transition: opacity 2000ms ease, visibility 2000ms ease;
}
#header {
background-color: red;
width: 100%;
height: 20px;
}
#conteneur_01 {
padding-top: 20px;
}
#essai {
background-color: green;
}
<div id="header" class="fixe afficher">header</div>
<div id="conteneur_01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>
<div id="essai">Essai</div>
<div id="conteneur_02">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada vulputate turpis, at dictum arcu pretium sit amet. Nunc mauris felis, fermentum luctus metus ac, tincidunt imperdiet dolor. Morbi neque odio, iaculis auctor fringilla finibus, dignissim
bibendum ante. Sed faucibus sit amet ante non cursus. Nullam sit amet risus eros. Etiam imperdiet dictum orci vel ullamcorper. Sed eleifend magna in erat tincidunt, sed pharetra felis ullamcorper. Aenean eget velit nec augue ultricies varius ac sit
amet lorem. Suspendisse eleifend aliquet dui, a mattis enim facilisis quis. Fusce pellentesque pretium nibh eu lacinia. Duis blandit ligula ac nibh ornare facilisis. Nullam tincidunt velit nec laoreet venenatis. Suspendisse quis dictum mi, sed venenatis
ex. Donec eget leo et eros sagittis aliquet. Proin tristique, dui eget mollis scelerisque, justo sem placerat nisi, quis lobortis diam dui vel nunc. Curabitur lacinia eros a commodo ultricies. Donec ullamcorper at enim vel volutpat. Curabitur tristique
lacinia interdum. Integer quis lobortis erat, vitae fermentum ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar eleifend erat eu condimentum. Quisque cursus mi vitae malesuada mollis.
Phasellus vel ullamcorper felis. Aliquam interdum ac orci in porttitor. Ut eu erat quis neque elementum bibendum. In rhoncus sed metus vitae dignissim. Sed ac volutpat lorem, eget molestie leo. Donec interdum mauris nibh, a dapibus mi fermentum eu.
Maecenas tincidunt augue sem, vel imperdiet ante iaculis at. Morbi vulputate cursus risus sit amet ultrices. Aliquam quis ultricies massa. Pellentesque ac lectus vitae mi aliquet porta pretium sit amet enim. Integer porta lacus cursus vestibulum malesuada.
Etiam pellentesque lorem sit amet nunc tristique cursus. Etiam ac ligula enim. Duis turpis orci, pulvinar quis sapien vel, sagittis aliquet nulla. Curabitur fermentum lectus non tortor ornare, ac iaculis risus porta. Quisque eu porttitor massa, vitae
dictum velit. Etiam egestas tempor sem vel congue. Aliquam erat volutpat. Praesent sed massa viverra, dictum velit sit amet, vestibulum risus. Quisque sodales in tellus vel eleifend. Vivamus tempus blandit erat quis condimentum. Donec laoreet neque
in pellentesque finibus. Morbi libero orci, finibus accumsan mollis id, bibendum quis mauris. Integer euismod et sapien in faucibus. Aenean efficitur ipsum quis lacus auctor auctor. Cras ut hendrerit eros. Curabitur nisl est, interdum et facilisis quis,
varius ut lectus. Proin dignissim, ipsum et posuere ornare, arcu ipsum vehicula diam, eu rutrum lacus odio sed quam. Donec odio mi, varius nec condimentum vitae, auctor et arcu. Cras in aliquet erat, eget placerat ante. Mauris justo odio, mollis eu
viverra eget, commodo id eros. Ut elit ipsum, cursus a ligula tincidunt, vulputate laoreet risus. Nulla aliquam viverra nulla sed ullamcorper. Aliquam id consequat quam. Curabitur ipsum lectus, finibus ac tortor sit amet, tristique dapibus lorem. Etiam
rutrum nulla ac efficitur tincidunt. Nam non elit sapien. Etiam rutrum felis sed justo vehicula dictum. Vivamus in ipsum varius metus finibus cursus vel quis dolor. Fusce non malesuada ipsum. Donec gravida, ligula at eleifend commodo, tortor tellus
eleifend orci, eget sodales neque quam nec elit. Ut sit amet finibus ex. Praesent ullamcorper dui at dui vestibulum, nec tincidunt libero vulputate. Phasellus tincidunt felis risus, et gravida nisi luctus nec. Mauris tristique faucibus justo, commodo
pellentesque ipsum aliquet eu. Vivamus suscipit, leo quis sollicitudin convallis, dolor leo ultricies risus, nec maximus lacus ligula convallis velit. Nulla nibh magna, mollis non dapibus volutpat, vestibulum et mi. Ut pharetra nisi a purus aliquet,
sed rutrum est sollicitudin. Nullam et sollicitudin nisi. Fusce interdum convallis convallis. Duis nisl dolor, finibus accumsan ex auctor, euismod mollis orci. Donec quis urna non mi maximus finibus. Vivamus luctus eros nec nulla varius, eget semper
turpis ultricies. Fusce volutpat nulla nec ante fringilla, vel lacinia arcu tempor. Integer iaculis est eu feugiat ullamcorper. Vestibulum posuere nec leo at porta. Curabitur id congue neque. Quisque sapien quam, facilisis in auctor vitae, faucibus
ac metus. Maecenas arcu nulla, fermentum non malesuada ut, vehicula vitae felis. Nunc consectetur, ante ut vulputate gravida, enim turpis sollicitudin dui, at tincidunt eros purus non dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
urna neque, tristique ut suscipit non, convallis quis orci. Vestibulum non lorem vel neque luctus mollis vitae eu quam. Nullam laoreet dignissim ex, vel fermentum dui cursus sit amet. Nullam vitae purus id orci ornare facilisis. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer interdum nisi sit amet lorem auctor pharetra. Nunc sit amet sem mauris. Vestibulum venenatis eleifend odio, in porta quam fermentum non. Maecenas varius bibendum diam sed molestie.
Praesent dapibus nibh eget consequat gravida. Nam pellentesque ipsum quis nunc efficitur, ac fermentum turpis cursus. Mauris tempus risus ac tellus ultricies tincidunt. Fusce sagittis eget nisi at dapibus. Integer eget posuere erat, quis pretium dui.
Sed vel augue ut nisl mattis pretium a vel justo. Nunc consequat magna congue risus accumsan, eget consequat justo scelerisque. Maecenas dapibus purus id enim varius fringilla vel nec elit. Cras porttitor convallis nulla id ullamcorper. Donec hendrerit
et augue sed facilisis. Fusce urna tortor, iaculis ut volutpat at, consequat vitae velit. Pellentesque volutpat pulvinar ultricies. Mauris lacinia, dui facilisis mattis elementum, sapien metus facilisis mi, vitae cursus justo magna eu nibh. Praesent
rutrum egestas est ac blandit. In hac habitasse platea dictumst. Curabitur venenatis non dolor id condimentum. In dui ex, molestie vel bibendum sit amet, iaculis sit amet elit. Suspendisse interdum non erat sed scelerisque. Duis quis posuere elit. Quisque
sodales cursus odio vitae efficitur. Vestibulum ultricies mollis urna, eget pharetra orci auctor ut. Aenean vel neque ac magna dapibus lacinia. Aliquam erat volutpat. Nulla facilisi. In commodo diam nisl, ac sollicitudin urna cursus a. Ut vehicula facilisis
vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum placerat enim sed viverra. Ut sed elementum diam, ut dapibus nunc. In ullamcorper laoreet ligula ut placerat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Mauris ultrices pulvinar elit et faucibus. Vivamus in porta quam. Donec iaculis lorem quis ipsum pharetra blandit. Maecenas scelerisque posuere elit, in malesuada sem vestibulum et. Etiam ultrices enim erat, non
accumsan libero sagittis ac. Duis ornare nulla dolor, ac aliquet quam blandit at. Donec nec risus quis nulla dictum auctor. Pellentesque mauris est, viverra a felis ut, laoreet laoreet lectus. Aenean sit amet hendrerit eros. Suspendisse potenti. Donec
in arcu scelerisque, scelerisque dui vitae, venenatis nulla. Fusce fermentum dui quis sapien efficitur, at tristique massa placerat. Curabitur vitae viverra nibh. Sed aliquet lacus eu orci accumsan, quis bibendum mi volutpat. In eu ante ullamcorper,
iaculis turpis quis, imperdiet magna. Phasellus ornare facilisis quam, a tempor nulla viverra quis. In dui erat, venenatis eget justo gravida, lobortis imperdiet nisl. Ut faucibus eleifend ultricies. Proin malesuada enim ut tempus sagittis. Donec ac
auctor lorem. Donec sed molestie lorem. Fusce scelerisque hendrerit sollicitudin. Duis maximus est vel dolor varius congue. Quisque mi ex, aliquet vitae ligula id, sagittis ornare elit. Pellentesque id aliquam neque.</div>

Hide footer on independent column scroll down, appear on scroll up

I'm working on creating a two-column website; the two columns scroll independently. I need the footer to be hidden when the user scrolls down and to appear again once the user scrolls back up. I'm new to Javascript and I recently learned how to do this with a site that scrolls as a whole. I've already browsed through questions of that nature here too, however I'm having trouble trying to apply that to the independent columns. I got the footer to hide on scroll down of the left column, but I can't get it to reappear when scrolling up. I've put together an example of what I have. Any help would be much appreciated.
var prevScrollpos = document.getElementById("left").pageYOffset;
document.getElementById("left").onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}
body {
margin: 0;
background-color: darkgreen;
font-family: Arial, Helvetica, sans-serif;
border-top: 9px solid #f8f25c;
}
p{
padding: 10px 20px 10px 25px;
}
#content, html, body {
height: 99%;
}
#left {
float: left;
width: 50%;
background: #fdfef9;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: #4668ff;
height: 100%;
overflow: scroll;
}
#navbar {
background-color: orangered;
position: fixed;
bottom: 0;
width: 100%;
display: block;
transition: bottom 0.3s;
}
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
text-decoration: underline;
color: black;
}
<body>
<div id="navbar">
Home
Services
Contact
</div>
<div id="content">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
</div>
</body>

Please try this:
var prevScrollpos = document.getElementById("left").scrollTop;
document.getElementById("left").onscroll = function () {
var currentScrollPos = document.getElementById("left").scrollTop;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}

How to disable the body scroll in the navigation overlay and enable it in the body?

Hello guys i'm looking for an answer to disable the body content scroll in navigation overlay, but when I close the navigation overlay the body scroll should start working but i'm unable to do that.
I couldn't find any correct answer on Stackoverflow. Any help would be appreciated.

You can use JavaScript to set the body overflow (or whatever element's) to hidden when the overlay opens & set it back to auto when you click the close button.
$('.open-overlay').click(function() {
$('body').css('overflow', 'hidden');
});
$('.close-overlay').click(function() {
$('body').css('overflow', 'auto');
});
Here's a working fiddle: https://jsfiddle.net/44gk77d3/1
EDIT: I've added the option to both enable/disable the overflow by clicking on the same button.
https://jsfiddle.net/44gk77d3/2/

Seeing your requirement I have created a code considering your conditions.
I have created body content with scrollable content and overlay menu also with scrollable content.
In the below-mentioned code you can check how body scroll is disabled while overlay menu is visible and again body scroll appears when overlay menu hides.
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.querySelector("body").style.overflow = "hidden";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.querySelector("body").style.overflow = "auto";
}
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat est eget consequat varius. Vestibulum non sapien ligula. Ut in nunc vel tortor finibus euismod vitae at ex. Cras ac purus iaculis, dapibus mi quis, volutpat lorem. Nunc rutrum tellus
massa, vitae molestie enim fermentum eu. Fusce id ex eu mi luctus rhoncus ut eget nulla. Cras a vehicula arcu, id pharetra mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean malesuada dui ac iaculis vehicula. Etiam venenatis,
est a tincidunt commodo, ex sapien cursus diam, non dictum purus lorem eu tellus. Ut ornare enim orci, ut vulputate odio feugiat at. Nullam laoreet sed ex non ultricies. Maecenas suscipit tincidunt elit, non pellentesque enim ornare et. Phasellus eu
gravida libero, vel tincidunt orci. Nulla facilisi. In congue, sapien tincidunt eleifend ornare, ex lectus finibus felis, aliquet pretium dui justo sed sapien. Nulla elementum arcu non leo lobortis, in ullamcorper eros convallis. Nullam luctus tincidunt
semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac risus sagittis, venenatis dolor eget, tempus nunc. Proin et nisl ac metus blandit interdum convallis ac quam. Proin porttitor nulla vel egestas
euismod. Suspendisse malesuada tellus quis purus consectetur molestie. Cras interdum varius interdum. Vestibulum condimentum nisi turpis, ut sodales arcu fringilla ut. Quisque ultricies sollicitudin lacus, sit amet euismod sem sagittis ac. Praesent
consectetur libero ut nunc suscipit vulputate. Duis commodo neque vel convallis euismod. Suspendisse potenti. Sed viverra eu enim a rhoncus. Proin sodales commodo odio non blandit. Phasellus rhoncus tellus at velit maximus tincidunt. Nullam lacus lectus,
mattis vel justo vitae, lacinia tempus elit. Sed dignissim posuere accumsan. In malesuada luctus tristique. Ut fringilla aliquet sapien in aliquet. Proin ac ultrices lectus. Mauris sed libero rutrum, tincidunt urna et, dignissim massa. Cras iaculis
sed tortor id maximus. Aliquam in sem id mi tristique pellentesque vitae efficitur leo. Proin non dolor ac libero fringilla tempor sed a arcu. Aenean rutrum tellus sapien, in volutpat lectus cursus et. Sed vel bibendum nulla. Proin nunc quam, dictum
eget congue maximus, vestibulum eu mauris. Aliquam erat volutpat. Morbi quis magna et est tempor condimentum in eu purus. Sed dignissim nulla sed diam scelerisque, non malesuada purus sodales. Praesent in nunc condimentum, tempor dolor vitae, accumsan
enim. Sed nec elit in ex porttitor rutrum. Maecenas ultricies augue eu ex porta, finibus efficitur ex eleifend. Proin volutpat diam a diam ultrices euismod. Sed bibendum semper lorem sodales auctor. Sed turpis dolor, pellentesque nec dui quis, tincidunt
commodo urna. Fusce sit amet elementum enim. Curabitur vel sodales mi, sed laoreet leo. Fusce ut ultricies justo. Etiam nec massa tortor. Mauris interdum commodo erat, in pulvinar urna vestibulum in. In posuere dictum nisl, non bibendum velit mattis
vulputate. Vivamus elementum magna et egestas bibendum. Nulla efficitur urna pellentesque, feugiat augue fringilla, pulvinar felis. In at sollicitudin metus. Aliquam vehicula aliquet dolor vel bibendum. Donec euismod enim metus, et gravida sem tempus
et. Donec ipsum quam, fermentum vel finibus quis, tempor vitae sem. Suspendisse tincidunt nulla ut eros congue cursus. Praesent ante ligula, congue in laoreet sed, pellentesque vel sapien. Nam pulvinar dolor at odio dignissim, vestibulum finibus justo
aliquet. Duis lobortis, metus a vehicula interdum, quam metus convallis orci, et rutrum nibh purus at massa. Aenean rutrum mi enim, accumsan efficitur lorem accumsan quis. In laoreet id arcu non accumsan. Donec quis urna et risus auctor feugiat eget
quis nisl. Aliquam vulputate libero a lacus luctus dignissim. Duis accumsan a tellus sed ultrices. Etiam ornare purus id iaculis volutpat. Pellentesque euismod mi orci, malesuada hendrerit ligula varius sollicitudin. Integer tortor justo, rhoncus a
lobortis vel, pharetra eu ipsum. Aliquam et lectus turpis. Aenean sagittis sapien ut mattis efficitur. Ut ut ullamcorper nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque tempus leo metus. Donec tempus dictum mauris. Praesent
finibus dolor vel faucibus finibus. Vestibulum tincidunt euismod dui in pretium. Donec quis facilisis augue. Praesent at lacus vestibulum, finibus leo a, lacinia est. Praesent vehicula sem turpis, non maximus elit placerat quis. Sed quis mi eu nunc
feugiat fermentum ut in mauris. Fusce turpis augue, mollis eu risus a, tincidunt pretium felis. Aliquam sapien velit, bibendum in bibendum at, porta et purus. Nam feugiat lectus vitae ex blandit vestibulum. Curabitur et vestibulum quam, quis ornare
odio. Pellentesque cursus, felis sit amet convallis rutrum, eros dolor finibus justo, sed finibus metus augue quis tellus. Morbi rutrum, mi ut pretium egestas, nisi risus luctus tellus, at pulvinar magna orci ut nunc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas nec eros malesuada, ornare arcu vitae, dictum massa. Suspendisse suscipit, ante vitae elementum scelerisque, orci neque mattis massa, vel luctus ante orci ac urna. Vestibulum sagittis, urna eget pellentesque convallis, massa
lorem tincidunt purus, eget tincidunt enim libero at lacus. Maecenas dignissim quam ut leo consectetur facilisis. Phasellus tincidunt viverra malesuada. Phasellus nec quam maximus, egestas ante ut, facilisis erat. Phasellus porta magna enim, nec semper
dolor facilisis sit amet. Proin dapibus dui sit amet urna convallis, et bibendum nunc aliquet. Suspendisse ac ex eu dui mollis molestie. Sed dignissim, sem in pretium ultrices, enim elit pellentesque odio, quis elementum nunc magna vitae nibh. Nulla
venenatis quis risus vitae rhoncus. Vivamus varius tempus justo vitae volutpat. Suspendisse vitae venenatis erat. In et ultrices nunc. Curabitur ac suscipit orci. Proin porta nibh ac urna viverra, a porttitor risus porttitor. Aliquam bibendum convallis
enim, eget porttitor dui dignissim vitae. Duis aliquet congue enim sit amet pretium. Ut sed imperdiet diam. Nam ut est mauris. Vestibulum ut lorem tristique, accumsan neque et, egestas diam. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Sed justo leo, accumsan suscipit purus nec, auctor faucibus leo. Donec at tincidunt purus, sit amet vulputate risus. Duis sed sodales neque. Donec nec risus id metus venenatis aliquam. Sed maximus tortor et ligula commodo
finibus. Nullam in leo at urna aliquam pellentesque. Donec egestas ex sapien, vitae commodo magna accumsan vitae. Sed tincidunt sit amet lacus accumsan rhoncus. Mauris feugiat magna vel nisl tincidunt, nec auctor neque pulvinar. Cras sit amet pellentesque
justo, sit amet elementum sapien. Suspendisse imperdiet feugiat massa, eu vulputate neque commodo quis. Morbi venenatis est ut massa sollicitudin consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin
porttitor diam sed convallis faucibus. Fusce pretium eget mi id consequat. Proin non sem euismod, porttitor elit sed, porttitor eros. Nam elementum, turpis quis convallis lacinia, libero nisi consectetur lectus, in luctus neque enim in leo. Quisque
congue elementum interdum. Quisque commodo urna ipsum, in ullamcorper sapien elementum vitae. Vivamus mollis magna orci, id volutpat felis sodales vitae. Quisque sagittis, ante a luctus dignissim, nisi elit mattis sapien, et sodales neque risus ut lacus.
Duis viverra justo augue, vel ornare erat laoreet ac. Aenean imperdiet leo non tristique dapibus. Morbi in tempus metus. Sed eu scelerisque dolor, ac vehicula tellus. Vivamus a quam a nisi dignissim posuere. Nulla facilisi. Praesent tristique dui nec
neque aliquam blandit. Nam non tincidunt ipsum. Morbi cursus sed nulla quis porta. Ut urna libero, iaculis ut velit sed, sagittis consectetur nisi. Aliquam pretium, est ac auctor pellentesque, nulla odio ornare dolor, sed vulputate purus neque ut ligula.
Cras diam felis, tempor quis placerat a, suscipit non odio. Nam enim erat, tempor nec euismod at, venenatis ut mi. Sed lacus sem, semper vel blandit id, rutrum et augue. Nulla varius mattis felis. Vestibulum ac eros sollicitudin, vehicula massa non,
suscipit dolor. Phasellus posuere ultricies nunc, lacinia viverra augue tempus eget. Quisque id lacinia nisi, sit amet tempor augue. Integer massa velit, aliquam vitae ex et, placerat euismod augue. Nullam faucibus, lorem eget sodales hendrerit, nulla
enim molestie risus, sed laoreet velit erat nec elit. Pellentesque nec condimentum felis. Quisque at nisi nec purus blandit hendrerit in et risus. Nam mattis enim tortor, eu porttitor purus blandit sed. Aenean scelerisque sodales consectetur. Sed euismod
ullamcorper mauris at aliquet. Praesent varius quam vulputate gravida tincidunt. Cras vitae nisl bibendum, dictum lectus sed, semper enim. Donec id felis ex. Proin sit amet eros nec metus eleifend dapibus at a nibh. Suspendisse est nibh, bibendum quis
tincidunt non, lobortis eget lorem. Aenean cursus pharetra porta. In congue, erat sit amet tempus molestie, arcu nisl finibus risus, eu tempus augue purus et ex. Vivamus maximus nisl ut facilisis suscipit. Vivamus nec ullamcorper arcu. Etiam eu dolor
vel orci consequat imperdiet nec eget nulla. Praesent volutpat maximus dolor, ut ornare odio aliquet interdum. Duis at felis velit. In non facilisis leo. Nulla a convallis nulla. Donec nulla odio, vestibulum eget pulvinar in, congue et lorem. Mauris
mollis cursus erat, in dignissim tortor viverra non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel nisi fringilla, molestie mi id, placerat lorem. Nullam elementum diam mauris, vel hendrerit lacus faucibus
ac. Donec justo orci, pretium at mollis et, rhoncus sed est. In tincidunt pellentesque nisl eu malesuada. Donec sagittis eros sit amet aliquam fringilla. Duis ullamcorper, ipsum vitae dignissim elementum, est odio accumsan orci, non pharetra ipsum dolor
sit amet nisi. In vulputate scelerisque arcu, sed laoreet nunc laoreet gravida. Fusce arcu sapien, dapibus nec dui vel, imperdiet luctus elit. Nullam ultrices velit a ex euismod, id fermentum risus mollis. Curabitur sem magna, posuere a nisl non, fringilla
pellentesque quam. Suspendisse ornare aliquet sem, ut luctus diam vulputate id. Nunc ac rhoncus erat. Nullam sed tortor mi. Etiam sed lorem ligula. Pellentesque efficitur fermentum lacinia. Aliquam erat volutpat. In fringilla elit ornare lacus euismod,
vel facilisis lorem tempus. Nulla et arcu vitae eros lacinia laoreet. Etiam convallis hendrerit libero, et tempus erat placerat ac. Nulla vitae tellus vitae risus euismod bibendum quis vel magna. Donec pellentesque mollis risus. Proin eleifend ipsum
mi, id malesuada lacus tincidunt sed. Maecenas aliquam facilisis urna, eget fringilla dui vulputate ac. Nam et lectus magna. Nulla sed mauris ut velit tempus sollicitudin eget id lacus. Vivamus venenatis massa orci, ut dapibus quam porttitor et. Maecenas
neque mi, commodo quis diam et, pellentesque porttitor nisl. Fusce dictum lectus mauris, a iaculis turpis tincidunt eu. Sed vestibulum quis ex dignissim ullamcorper. Integer tempus elit et dolor semper, eget interdum magna fermentum. Ut pulvinar venenatis
ultricies. Donec rutrum turpis at ipsum congue bibendum. Nam porttitor id dolor in pharetra. Ut lectus mi, suscipit ut odio et, condimentum luctus sapien. Vivamus est enim, volutpat at viverra ut, sollicitudin at ex. Nulla imperdiet porta sem. Nulla
facilisi. Maecenas et risus sit amet magna fringilla placerat. Nulla elementum nunc vitae dictum varius. Ut eu felis risus. Aliquam viverra vestibulum velit, ut cursus nisl cursus in. Sed molestie massa at nisi ornare sodales.
</p>
If still you face any doubt feel free to comment.

jQuery detect element in viewport - calc causing issues

I am trying to detect when an element is completely out of the viewport, I have this so far...
/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = $(".element").offset().top + $(".element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if((bottom_of_screen > top_of_element) && (bottom_of_screen < bottom_of_element)){
// The element is visible, do something
console.log('visible');
}
else {
console.log('not visible');
// The element is not visible, do something else
}
});
})
html, body {
padding:0;
margin:0;
}
.header {
background:blue;
position:fixed;
height:100px;
width:100%;
color:white;
text-align:center;
z-index:9999;
}
.element {
height:calc(100vh - 100px);
background:wheat;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
<div class="element">
This is a test element
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
It is not working for unless I remove the calc from the .element height.
How can I modify this so that it takes my sticky header into account?

/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = top_of_element + $(".element").outerHeight();
var scrolled = $(window).scrollTop();
if (scrolled + $('.header').height() < bottom_of_element && scrolled + $(window).height() > top_of_element) {
console.log('visible');
} else {
console.log('not visible');
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.header {
background: blue;
position: fixed;
height: 100px;
width: 100%;
color: white;
text-align: center;
z-index: 9999;
}
.element {
height: calc(100vh - 100px);
background: wheat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<div class="element">
This is a test element
</div>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>

Scriptaculous Shaking Effect Problem

The scriptaculous shaking effect somehow produce some bugs for Webkit browsers, including Chrome and Safari. When shaking, the element will shift to the top left of the screen covering everything. An example code is given as below, are there any ways of solving this?
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js?load=effects'></script>
</head>
<body>
<div style="z-index: 20000; position: fixed; display: block; bottom: 10px; right: 10px; background-attachment: scroll; background-color: white;" id="floating_text">
<p>This should be some floating text.</p>
<p>Some more floating text.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui ligula, tempus adipiscing posuere id, sollicitudin sed nulla. Sed neque diam, volutpat non interdum vel, pellentesque vitae lorem. Vivamus et leo risus. Fusce at nunc nulla, non ultricies elit. Aliquam erat volutpat. Aliquam pulvinar mi at purus laoreet eu varius nisl laoreet. Mauris lobortis sapien diam. Maecenas arcu est, ullamcorper fringilla placerat nec, semper ut arcu. Curabitur metus nisl, ornare nec posuere at, tincidunt tempor nisi. Ut ut est risus. Curabitur elit urna, sagittis sagittis cursus quis, accumsan eget nulla. Donec odio ante, rutrum at fermentum vel, tempus gravida odio. Quisque a ante a urna vehicula posuere ac ut orci. Integer luctus sem et justo condimentum consequat. Phasellus pharetra malesuada velit, et commodo arcu imperdiet vitae. Suspendisse vitae risus orci. Maecenas massa tortor, sodales ut luctus ac, lacinia vitae sapien. Vestibulum sit amet rutrum est. Nullam magna erat, semper a volutpat id, porta sed nisl.</p>
<p>Praesent nec consectetur sapien. Integer mollis libero a odio pharetra vulputate. Donec mattis consequat arcu, vel ultricies orci imperdiet sit amet. Mauris sit amet tellus libero. Morbi ac venenatis ligula. Cras tellus neque, porttitor sit amet hendrerit nec, ornare quis tellus. Nam iaculis mi at mi bibendum at commodo justo pretium. Ut in nibh non diam hendrerit fermentum a ut odio. Curabitur lorem turpis, tincidunt et rhoncus et, pulvinar a metus. Vestibulum a quam sit amet arcu condimentum cursus vitae feugiat lectus. Sed ut lorem tellus, non sagittis enim. Curabitur lectus eros, commodo a elementum et, molestie eget est. Donec ullamcorper, arcu nec volutpat auctor, sem odio interdum tellus, nec volutpat lacus libero at nisl. Aliquam metus sapien, aliquam a rutrum ac, tincidunt at purus. Donec in erat mi. Quisque semper mauris in massa bibendum sed tincidunt augue facilisis. In tempus lacinia urna ac tristique.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce tristique urna sem. Etiam iaculis aliquam dui nec porta. Proin tristique diam non augue mattis tristique. Phasellus nulla erat, adipiscing sed cursus sed, pulvinar eget nisl. Maecenas blandit nibh eu nisl facilisis et semper turpis posuere. Pellentesque auctor sem in massa sollicitudin congue. Vivamus quis lacinia massa. Aliquam sodales dictum magna, eget ullamcorper eros placerat at. Quisque gravida diam sit amet nunc porta aliquam. Ut quis aliquet est. Maecenas risus tellus, euismod id porttitor at, porta id turpis. Phasellus id molestie ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean purus nibh, egestas vestibulum aliquet eget, luctus nec eros. Nulla facilisi. Quisque molestie, sem interdum posuere lacinia, nisl purus ornare lectus, id dapibus lacus dolor in ipsum. Aenean pharetra leo nulla.</p>
<p>Curabitur nisi quam, iaculis eget pellentesque vel, pretium sed massa. In viverra, tellus at sollicitudin fringilla, orci eros blandit elit, a bibendum mauris dolor ut metus. Vivamus pellentesque suscipit diam, vitae euismod mi pellentesque vitae. Nullam neque libero, vehicula ut iaculis at, tincidunt eget leo. Suspendisse vitae velit justo. Nullam vitae sem tincidunt nulla tincidunt mollis in id massa. Duis rhoncus elementum turpis quis mollis. Vivamus egestas urna in velit commodo iaculis. Aenean quis dolor eu odio porttitor rhoncus nec vel eros. Donec ut est eu nisl vehicula pulvinar et id dolor. Donec a dolor neque. Morbi tempus mattis tortor ut rutrum. Phasellus orci metus, pellentesque vel tincidunt nec, pulvinar eu ante. Duis faucibus felis et diam ullamcorper in feugiat urna dignissim. Quisque nec diam mauris, vel viverra arcu. Cras sagittis dignissim nisl in sagittis. Fusce venenatis rhoncus est, nec elementum libero dapibus eget. Donec eu velit metus. Sed sollicitudin felis a diam condimentum in suscipit neque varius. Nulla nec tortor tristique elit malesuada luctus luctus quis leo.</p>
<p>Nullam at quam dui. Ut gravida, tellus malesuada faucibus gravida, purus nulla consequat lorem, pellentesque egestas justo quam et enim. Suspendisse fringilla tellus id odio tristique varius. Cras et metus elit. Etiam interdum adipiscing mollis. Aliquam aliquet vestibulum imperdiet. In consectetur, nunc cursus sodales scelerisque, tellus eros tristique nisl, ut luctus augue dolor vel nibh. Fusce eget dui sed eros tristique varius lacinia id sapien. Nullam ac lorem ac lacus cursus ultricies id a risus. Ut eget dolor sem. Aliquam euismod consequat euismod. Duis sit amet neque et massa ullamcorper tempor.</p>
<p>Quisque rutrum, ipsum ac volutpat dictum, urna diam facilisis enim, ac vestibulum justo metus eu mi. Curabitur nunc sem, consequat a mollis non, bibendum vitae dolor. Mauris pulvinar pellentesque tellus, vel aliquet mauris vulputate vel. Morbi eu ante id nulla ultricies tincidunt. Proin porta, felis nec tincidunt iaculis, justo nibh laoreet dolor, eu sollicitudin arcu justo et odio. Sed suscipit tellus lobortis est tristique semper fermentum magna laoreet. Sed eget ante nunc, vitae varius purus. Mauris nec viverra neque. Morbi et lectus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer sit amet lobortis magna.</p>
<p>Phasellus elementum iaculis sem in consectetur. Curabitur nec dictum enim. Nunc at pellentesque augue. Nulla sit amet sapien neque, et molestie augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin non elit ante. Mauris justo tellus, feugiat at dapibus a, placerat id felis. Nullam lobortis vehicula rutrum. Fusce tristique pharetra urna, ac scelerisque ipsum consequat eget. Morbi at ipsum in tellus luctus volutpat. Duis placerat accumsan lacus, dictum convallis elit porttitor eu.</p>
<p>Sed ac neque sit amet neque luctus rhoncus. Vestibulum sit amet commodo ante. Duis ullamcorper est id dui ullamcorper cursus. Maecenas fringilla ultricies turpis, nec pulvinar libero faucibus a. Quisque bibendum aliquam sapien, in fermentum arcu iaculis at. Mauris bibendum, metus sed rhoncus fringilla, nisl purus interdum eros, vitae malesuada felis est rhoncus magna. Phasellus elit justo, sagittis nec interdum tincidunt, mollis quis justo. Suspendisse rhoncus rutrum vestibulum. Aliquam ut nunc lectus, quis aliquam risus. Aliquam vel nulla sed odio blandit sagittis. Nulla facilisi. Vivamus ullamcorper, lectus facilisis eleifend accumsan, purus massa sollicitudin nunc, in sodales tellus dui eget est. Morbi ipsum nisi, semper sit amet vehicula sit amet, semper at mauris. Nam mollis massa sed risus scelerisque quis congue mauris tempus. Vestibulum nec urna magna, vitae ornare massa. Aenean adipiscing tempor rutrum.</p>
<p>In hac habitasse platea dictumst. Etiam in dolor eros, eleifend volutpat magna. Sed blandit gravida feugiat. Sed eu dolor in odio sagittis molestie eget ac orci. Phasellus tellus erat, scelerisque tincidunt lacinia sed, placerat eu sapien. Curabitur lobortis feugiat cursus. Nam eu egestas justo. Nullam dignissim enim ipsum, sed semper orci. Donec nulla dui, viverra vel viverra eu, eleifend nec justo. Sed in ultricies turpis. Maecenas ullamcorper, erat ac scelerisque mattis, augue magna laoreet mauris, nec sagittis tellus enim eget tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum urna eu magna ultricies adipiscing. Phasellus sed urna at nibh euismod vestibulum at eget dui. Nulla ullamcorper viverra tellus ut volutpat. Praesent hendrerit, purus a imperdiet tempus, turpis est suscipit felis, ut commodo diam orci ac augue. Quisque consectetur varius sapien, vel lobortis ante porttitor sit amet. Proin fermentum blandit justo, id faucibus elit feugiat ut. Nulla quam elit, tristique gravida ultrices in, imperdiet et enim.</p>
<p>Aliquam malesuada, nibh eget laoreet malesuada, lorem ligula gravida eros, a consectetur dui odio id urna. Vivamus tincidunt porttitor facilisis. Maecenas vitae lacus at lorem porttitor sodales. Duis et velit ac ipsum cursus ornare. Aliquam eu rhoncus est. Cras nec facilisis tellus. Nunc in felis odio. Nam facilisis dui eu lacus egestas sit amet malesuada dolor volutpat. In placerat dictum turpis ac vulputate. Suspendisse neque odio, elementum sagittis sollicitudin quis, eleifend ac orci. Proin suscipit molestie orci non venenatis. Sed metus mauris, laoreet id lobortis at, tempor eu erat. Mauris tempor, nisi id interdum tempor, tellus ligula pretium mi, a viverra nibh neque vitae est. Integer mattis, lorem ac congue fermentum, quam ipsum gravida erat, in egestas lorem eros ac massa. Vestibulum lobortis ante libero, vel fermentum ante. Aliquam augue ipsum, ullamcorper sit amet dictum id, commodo sit amet lacus. Vivamus elit purus, elementum a vestibulum quis, iaculis id metus. Cras facilisis orci in nulla consequat gravida. Integer blandit, felis at lacinia porta, lacus velit pretium magna, ut eleifend diam magna a justo. Donec scelerisque diam quis nisi molestie vel egestas urna condimentum. </p>
<script type="text/javascript">
Effect.Shake('floating_text');
</script>
</body>
</html>

The DIV takes 100% of the screen once it is "absolutized" by the animation function. If you supply a height and width to "floating_text", it works fine.

Categories