We Keep Coding

jQuery detect element in viewport - calc causing issues - javascript

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>

Related

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>

I've seen this on many websites where upon scroll one element becomes fixed while the elements next to it continue to scroll. I would like to understand how this works.
I created a pen for this: https://codepen.io/lisaschumann/pen/WNoJBbb where the left column is meant to be fixed when the right column starts to scroll. What am I missing here?
I used jQuery Code I had found on the issue, but ideally I would like to create this with JS.
CSS, jQuery and HTML:
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function () { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
* {
box-sizing: border-box;
}
/* Set additional styling options for the columns*/
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="margin: 0;;">
<div style="padding: 20px;">
<h1> Test</h1>
<div class="row">
<div class="column" style="height: 300px;">
<div class="fixme" style="background-color: red; border: 1px solid black; color: white; padding: 20px;">
<h2 style="margin:0 0 10px 0;">Headline</h2>
<span>Additional Info</span>
</div>
</div>
<div style="height: 2000px; background-color: blue; border: 1px solid black; color: white; padding: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</div>
</div>
Many thanks,
Lisa

Is this what you wanted or not? If you want to move header along with scroll, you can use position: sticky. Here you can find more: https://www.digitalocean.com/community/tutorials/css-position-sticky
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 20px;
}
.headerContainer {
width: 35%;
position: sticky;
position: -webkit-sticky;
top:10px;
left:0;
background-color: red;
border: 1px solid black;
color: white;
padding: 20px;
}
.row{
height: 2000px;
background-color: blue;
border: 1px solid black;
color: white;
padding: 20px;
}
h2{
margin:0 0 10px 0;
}
<body>
<body>
<h1> Test</h1>
<div class="row">
<div class="headerContainer">
<h2>Headline</h2>
<span>Additional Info</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Eget mauris pharetra et ultrices neque ornare. Scelerisque eu ultrices vitae auctor eu. Aliquam vestibulum morbi blandit cursus risus at. Amet nisl purus in mollis nunc. Nunc faucibus a pellentesque sit amet porttitor eget. Aliquet bibendum enim facilisis gravida neque convallis a. Egestas congue quisque egestas diam. Leo in vitae turpis massa sed elementum tempus egestas. Ultricies lacus sed turpis tincidunt id aliquet risus. Lectus vestibulum mattis ullamcorper velit. Laoreet id donec ultrices tincidunt arcu. Ipsum consequat nisl vel pretium lectus quam id leo in. Mauris rhoncus aenean vel elit scelerisque mauris. Massa tincidunt dui ut ornare lectus sit amet est. Magna etiam tempor orci eu lobortis. Proin libero nunc consequat interdum varius sit. Urna duis convallis convallis tellus id interdum.
<br>
Amet nisl suscipit adipiscing bibendum est ultricies. Vitae et leo duis ut diam quam nulla. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Quam quisque id diam vel quam elementum pulvinar etiam non. Senectus et netus et malesuada fames ac turpis egestas sed. Lectus nulla at volutpat diam ut venenatis. Augue ut lectus arcu bibendum at varius vel pharetra vel. Sed vulputate mi sit amet mauris. Eu ultrices vitae auctor eu. Elementum sagittis vitae et leo duis ut diam. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Erat pellentesque adipiscing commodo elit at imperdiet. Massa vitae tortor condimentum lacinia quis. Dui accumsan sit amet nulla facilisi morbi.
<br>
Orci eu lobortis elementum nibh tellus molestie nunc non. Gravida in fermentum et sollicitudin. Elementum curabitur vitae nunc sed velit dignissim sodales. Ipsum dolor sit amet consectetur. Tortor consequat id porta nibh. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Convallis posuere morbi leo urna molestie. Massa placerat duis ultricies lacus sed turpis. Diam volutpat commodo sed egestas egestas. Nec ullamcorper sit amet risus nullam eget felis eget. Cursus vitae congue mauris rhoncus aenean. Quis lectus nulla at volutpat diam ut. Convallis aenean et tortor at risus.
<br>
Convallis convallis tellus id interdum velit laoreet id donec. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Sed odio morbi quis commodo. Feugiat in fermentum posuere urna nec. Elementum facilisis leo vel fringilla est ullamcorper. Pellentesque diam volutpat commodo sed egestas egestas. Ac tortor dignissim convallis aenean et tortor. Nunc eget lorem dolor sed viverra ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed. Volutpat blandit aliquam etiam erat. Vel turpis nunc eget lorem dolor sed. Neque ornare aenean euismod elementum nisi quis eleifend. Habitant morbi tristique senectus et netus et. Non pulvinar neque laoreet suspendisse interdum consectetur. Congue eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet.
<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada. In ornare quam viverra orci sagittis. Mauris cursus mattis molestie a iaculis at. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Interdum velit laoreet id donec. Tortor pretium viverra suspendisse potenti nullam ac tortor. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Turpis nunc eget lorem dolor. Lobortis feugiat vivamus at augue eget arcu dictum varius duis. Sit amet dictum sit amet justo donec enim diam. Neque viverra justo nec ultrices dui. Felis imperdiet proin fermentum leo vel. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat.
<br>
Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Lacus suspendisse faucibus interdum posuere. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Amet aliquam id diam maecenas ultricies mi eget. Libero volutpat sed cras ornare arcu dui vivamus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Et netus et malesuada fames. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Ipsum dolor sit amet consectetur. Consectetur purus ut faucibus pulvinar elementum integer. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Semper eget duis at tellus. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Eget arcu dictum varius duis at consectetur lorem donec. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Nullam eget felis eget nunc lobortis mattis.
<br>
Venenatis lectus magna fringilla urna. Lorem mollis aliquam ut porttitor. Id diam maecenas ultricies mi eget mauris. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Tincidunt eget nullam non nisi est sit amet facilisis. Felis donec et odio pellentesque diam. Nullam ac tortor vitae purus. Dictum at tempor commodo ullamcorper a lacus. Diam maecenas sed enim ut sem viverra aliquet eget. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Ac felis donec et odio pellentesque diam volutpat commodo. Facilisis volutpat est velit egestas dui.
<br>
Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam quisque id diam vel quam elementum pulvinar etiam non. Amet massa vitae tortor condimentum lacinia quis vel eros. Maecenas pharetra convallis posuere morbi leo urna molestie. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ante metus dictum at tempor commodo ullamcorper a lacus. Dui faucibus in ornare quam viverra orci sagittis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Tincidunt nunc pulvinar sapien et. Sed adipiscing diam donec adipiscing tristique risus nec. Dolor morbi non arcu risus quis varius quam quisque id. Morbi quis commodo odio aenean.
<br>
Dolor sit amet consectetur adipiscing. Aliquet nec ullamcorper sit amet risus nullam eget felis. Tristique magna sit amet purus. Ut venenatis tellus in metus vulputate. Sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit. Aliquam purus sit amet luctus venenatis lectus. Eget mauris pharetra et ultrices neque ornare. Congue eu consequat ac felis. Lacus viverra vitae congue eu consequat ac felis donec et.
<br>
Tempus iaculis urna id volutpat lacus laoreet. Quis commodo odio aenean sed adipiscing diam. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Blandit massa enim nec dui nunc mattis enim. Sem integer vitae justo eget magna fermentum iaculis eu non. Ut tortor pretium viverra suspendisse potenti. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Ut tristique et egestas quis. Ut enim blandit volutpat maecenas volutpat. Magna eget est lorem ipsum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Cum sociis natoque penatibus et magnis dis. Nisi quis eleifend quam adipiscing vitae. Odio euismod lacinia at quis risus. Dignissim sodales ut eu sem integer. Arcu ac tortor dignissim convallis aenean et tortor. Amet mauris commodo quis imperdiet. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nullam ac tortor vitae purus faucibus ornare. Pharetra convallis posuere morbi leo urna molestie at elementum eu.</p>
</div>
</body>

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;
}

I am trying to scroll a page down by 100px on page load using jQuery. I have this so far..
jQuery(window).load(function() {
window.scrollBy(0, 100);
});
body {
background:lightgray;
}
h1, h2 {
text-align:center;
}
.center {
text-align:center;
width:100%;
object-fit:cover;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Title
</h1>
<h2>
Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
I am getting a script error, can anyone see why?

jQuery load is different, window.onload is different
use this code
$(window).on("load", function() {
window.scrollBy(0, 500);
});
$(window).on("load", function() {
window.scrollBy(0, 500);
});
body {
background:lightgray;
}
h1, h2 {
text-align:center;
}
.center {
text-align:center;
width:100%;
object-fit:cover;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Title
</h1>
<h2>
Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>

Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.

Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>