We Keep Coding

How do I create a modal overlay over a scrollable div with fixed width and height?

I've trying to place a modal overlay over a scrollable parent div with fixed width and height but I'm having trouble getting this to work. Here is the CSS that I'm using:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
overflow-y: scroll;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
}
.modal {
width: 200px;
height: 100px;
background: white;
}
I have the following jsfiddle which illustrates the issue:
https://jsfiddle.net/8wgpt0d7/
You can see from the fiddle as you scroll towards the bottom the modal overlay no longer covers the background content and I want to get the modal to cover the content but I'm not sure how.
Any tips or help would be much appreciated!

Try this:
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
overflow-y: scroll;
background: rgba(0,0,0,0.55);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right:0;
width:100%;
}
.modal {
position: absolute; /* effectively fixed */
top: 50px;
left: 20px;
right:20px;
bottom:0;
background-color: #FFF;
height: 100vh;
max-height:100px;
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>

I have a less than sophisticated but very dynamic answer? https://jsfiddle.net/f2k7z4u0/
JQUERY
if($('.overlay').prop('display') != 'none'){
var $parentHeight = $('.parent')[0].scrollHeight;
$('.overlay').css('height', $parentHeight);
}
UPDATED CSS (only for .modal)
.modal {
width: 200px;
height: 100px;
background: white;
position: absolute;
top: 40px;
}

var scrollMaxValue = $('.child').prop('scrollHeight');
var currentPosition = 0;
$('.overlay').mousewheel(function(e,d) {
e.preventDefault();
if ((d > 0) && (currentPosition > 100)){
currentPosition = currentPosition - (10 * 10)
}
else if((d < 0) &&(currentPosition < scrollMaxValue)){
currentPosition = currentPosition + (10 * 10)
}
$('.child').scrollTop(currentPosition);
});
.parent {
position: relative;
border: solid 3px red;
width: 350px;
height: 200px;
}
.child{
width:100%;
height:100%;
overflow-y: auto;
}
.overlay{
position: absolute;
width:333px;
height:100%;
top:0;
left:0;
background: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
left:20%;
top:25%;
margin:0 auto;
width: 200px;
height: 100px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere metus eu nisl tempus feugiat. Etiam eu lorem in turpis aliquet interdum eleifend quis orci. Integer egestas urna ac nunc tempus sagittis. Quisque lobortis sem sit amet lorem imperdiet, id dignissim mauris posuere. Etiam condimentum quam a sagittis scelerisque. Donec velit turpis, molestie vitae dui quis, malesuada scelerisque neque. Donec libero lacus, feugiat ut leo id, sollicitudin sodales enim.
Aliquam aliquet pretium blandit. Suspendisse at dapibus dui. Nunc bibendum euismod ipsum, a tempor felis egestas convallis. Pellentesque blandit, mi eget sollicitudin fringilla, est purus sollicitudin nunc, nec suscipit magna tellus eu sem. Praesent eget augue et sapien interdum fringilla vitae vel odio. Duis vel maximus magna. Nam vitae purus vel lacus varius aliquam quis non libero. Duis at orci maximus, dapibus leo eu, varius dui. Vestibulum id nunc ac urna ultrices accumsan. Mauris augue diam, volutpat vel lobortis in, pharetra a ligula. Nulla at consequat velit, non euismod magna. Nam sed metus nec massa eleifend pretium sed id lacus. Suspendisse at semper erat, vitae facilisis ex. Morbi consectetur eget nunc id blandit.
Proin erat dui, varius id urna eget, posuere iaculis leo. Nunc vulputate, est sit amet gravida lobortis, arcu dolor molestie erat, vitae tristique metus libero in dui. Donec vitae orci at lectus gravida pretium. Donec laoreet volutpat ullamcorper. Praesent finibus purus nec metus sagittis, id varius lorem cursus. Nulla vel placerat enim. Pellentesque quis urna sem. Nam blandit lacus et augue imperdiet tincidunt. Sed risus sem, pharetra ac turpis ut, vulputate dictum lacus.
Donec velit ligula, dictum pulvinar faucibus dignissim, porttitor et est. Vivamus pharetra erat eu sem consectetur, et fringilla diam luctus. Phasellus gravida ex neque, eu aliquet leo pulvinar ut. Proin faucibus accumsan ipsum, a aliquam lectus pellentesque a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec metus neque, eleifend nec ex a, posuere porttitor lacus. Nulla finibus quam nulla, vitae molestie magna maximus ac. In quis felis quis elit fringilla tincidunt quis sed mi. Donec ipsum justo, congue consequat tempus quis, viverra et dolor. Aliquam cursus sapien in libero auctor, et rhoncus purus sodales. Phasellus sapien sapien, consequat id cursus quis, vestibulum vitae metus. Suspendisse ac congue diam.
Sed finibus enim ac magna tincidunt ultrices. Donec nec libero vulputate, congue tortor nec, vehicula ante. Sed consectetur nibh eu quam scelerisque pulvinar. Phasellus ac elementum velit. Curabitur malesuada leo urna, nec dignissim eros mollis eget. In aliquet suscipit nulla sed pulvinar. Morbi pellentesque mi risus, nec aliquam lorem facilisis id. Donec ut quam lorem. Phasellus risus turpis, congue id ultrices vel, pretium at magna. Fusce vestibulum eros sed metus commodo fermentum. Aliquam id rutrum felis. Suspendisse felis metus, imperdiet id pharetra finibus, bibendum at orci. Fusce tristique elementum ex, at iaculis augue. Nullam maximus imperdiet nisi, et dapibus erat dapibus ac. Morbi tincidunt urna et arcu suscipit, id ultricies erat fermentum.
</div>
<div class="overlay">
<div class="modal">
Modal
</div>
</div>
</div>

How to make submenu always under the header?

I need to make a submenu always adjacent to main menu(header). Header is always the same for all subpage but submenu is different for each subpage. I want to when window scroll down, header padding change and submenu is still adjacent to header - this works but if header goes to the top fast, submenu is hidding below the header.
Codepen: https://codepen.io/anon/pen/PVgNER
$(window).on('scroll', function (event) {
event.preventDefault();
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if (window.scrollY >= 100) {
$('.header').addClass('no-padd');
} else {
$('.header').removeClass('no-padd');
};
});
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
} else {
var hei = $('.header').outerHeight();
$('.page-content').css('margin-top', hei);
}
$(window).on('resize', function() {
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
}
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
});
.bg-black {
background-color: gray;
}
.header {
padding-top: 25px;
padding-bottom: 25px;
position: fixed;
top: 0;
z-index: 9999;
transition: all .1s;
}
.no-padd {
padding-top: 0;
padding-bottom: 0;
}
.header a {
color: #000;
font-size: 15px;
font-weight: 300;
text-decoration: none;
transition: all .1s;
}
.header a:hover {
color: #cba168;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav ul li {
padding-left: 15px;
padding-right: 15px;
}
nav ul li a{
display: block;
text-transform: uppercase;
text-align: center;
color: #ffffff;
padding-bottom: 15px;
padding-top: 15px;
transition: all .3s ;
}
.header-phone,
.header-socials {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header-phone a:after,
.header-socials a:after {
content: '';
display: block;
position: absolute;
border-right: 1px solid #cba168;
height: 100%;
top: 0;
right:0;
}
.header-phone i {
margin-right: 5px;
}
.header-socials a {
margin-right: 10px;
}
.bg-brown {
background-color: #252525;
}
.submenu {
position: fixed;
top: 0%;
z-index: 99;
transition: all .1s;
}
.submenu ul {
display: flex;
align-items: center;
list-style-type: none;
justify-content: flex-start;
padding-left: 25%;
margin: 0;
}
.submenu ul li a {
color: #fff;
font-size: 15px;
text-decoration: none;
display: block;
padding: 15px 35px;
transition: all .3s;
}
.submenu ul li:hover a {
color: #cba168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<div class="container-fluid themewidth bg-black header" id='header'>
<div class="row">
<div class="col-6 col-lg-2 d-flex align-items-center justify-content-center logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width=50; alt="">
</div>
<div class="col-lg-6 pl-4 main-menu d-flex justify-content-center align-items-center">
<nav><ul><li><a href=''>header 1</a></li><li><a href=''>header 2</a></li><li><a href=''>header 3</a></li></ul></nav>
</div>
<div class="col-6 col-lg-4 pr-0 pl-0 d-flex justify-content-center align-items-center">
<div class='header-phone pr-4 pl-4'>
<a href='tel:+121212'>
<i class="fas fa-phone fa-rotate-90"></i><span>+12 12 12 12</span>
</a>
</div>
<div class='header-socials pr-4 pl-4'>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid bg-brown submenu">
<div class="row">
<div class="col-12">
<nav>
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</nav>
</div>
</div>
</div>
<main class='page-content pt-5'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
</main>

You are taking it a long way.
you can do this easily using CSS.
Remove scroll function in Javascript and use the below code
.submenu ul{
position: -webkit-sticky;
position: sticky;
top: 0;
}
You can refer the link below.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Thanks

JSFiddle dropdown button not clickable

I'm creating a test drop-down menu. The open menu button works fine but the close button is not clickable/hover-able/etc. When the open menu button is pressed, it should make the other one visible and clickable.
Not sure why the close button isn't working, its display property is being set back to block on click.
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index: 3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover {
background-color: gray;
}
#cross {
z-index: 3;
margin: 20px;
display: none;
float: right;
width: 100px;
height: auto;
}
#cross:hover {
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top: 50px;
color: red;
width: 100%;
background-color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
z-index: 2;
}
#body_freeze {}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio ut
sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis aliquam.
Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan.
Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum at varius
vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus non enim praesent
elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium nibh ipsum consequat
nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Arcu
cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus vulputate. Mollis nunc sed
id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>

Your problem is that you are defining as fixed the element "body_freeze", but not defining his exact position so it is overlaying the button impedding you to click it. I edited your code and added position, top and z-index props to your id body_freeze in the style definition.
function menu_change() {
var burg = document.getElementById("burg");
var cross = document.getElementById("cross");
var body_freeze = document.getElementById("body_freeze");
var nav_list = document.getElementById("nav_list");
var nav_items = document.getElementsByClassName("nav_item");
if (burg.style.display === 'none') {
burg.style.display = 'block';
cross.style.display = 'none';
nav_list.style.display = 'none';
body_freeze.style.position = 'relative';
} else {
burg.style.display = 'none';
cross.style.display = 'block';
nav_list.style.display = 'block';
body_freeze.style.position = 'fixed';
}
}
.fixed_nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 50px;
background-color: white;
border-bottom: 1px solid black;
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}
#burg {
z-index:3;
float: right;
display: block;
margin: 20px;
width: 100px;
height: auto;
}
#burg:hover
{
background-color: gray;
}
#cross {
z-index:3;
margin:20px;
display: none;
float: right;
width:100px;
height:auto;
}
#cross:hover
{
background-color: gray;
}
#nav_list {
height: 100vh;
width: 100%;
background-color: white;
display: none;
z-index: 1;
}
#dummy_text {
margin-top: 50px;
}
.nav_item {
margin-top:50px;
color: red;
width:100%;
background-color:white;
border-top:1px solid black;
border-bottom: 1px solid black;
z-index:2;
}
#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}
<html>
<head>
<title>ExampleError</title>
</head>
<body>
<nav class="fixed_nav">
<button id="burg" onclick="menu_change();">
☰
</button>
<button id="cross" onclick="menu_change();">
˟
</button>
<ul id="nav_list">
<div class="nav_item">
<a href="#">
<li>Inventory</li>
</a>
</div>
<div class="nav_item">
<a href="#">
<li>Finance</li>
</a>
</div>
</ul>
</nav>
<div id="body_freeze">
<p id="dummy_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
</p>
</div>
</body>
</html>

Break out of for each loop JQuery

I am writing JQuery script to determine when an element of fixed height is filled by content equalling greater height, at which point I want it to create a new identical element for all of the overflowing content to flow into. I want it to do this automatically on repeat.
I have this down for the most part, but am experiencing a problem because of the "for each" loop I'm running on the child elements.
While the script effectively creates a new page once the first page has overflowed, and it successfully moves the overflowing content into the new page, it does this for each new child thereafter irregardless of the fact that the content height should be reset. The way I see it, I need to prompt the creation of the new page in the loop to transfer the current child element over into it. I tried escaping the loop with a "return false;" which breaks the entire script.
HTML:
<div id="page-container">
<div class="page">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla ipsum vitae neque fermentum, a sagittis magna lacinia. Nullam eget nibh nulla. Vivamus tellus lectus, ullamcorper sit amet diam eget, placerat gravida enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce condimentum risus sed nunc feugiat maximus. Sed tincidunt nisi velit, et hendrerit dolor suscipit eu. Aenean dui nulla, tempus eu posuere congue, iaculis eu sapien. Phasellus volutpat nisi dui, a malesuada justo posuere vitae. Sed dolor turpis, porta a libero sed, rutrum elementum augue. Proin diam nibh, gravida eget velit nec, tempor consectetur felis.</p>
<p>Aliquam interdum accumsan nisl eget ullamcorper. Morbi id ornare dui. Aliquam euismod efficitur magna ut vestibulum. Sed pellentesque metus vitae quam feugiat, eu ultricies ipsum tristique. Ut in diam quis nulla aliquam dictum. Aenean sapien leo, rutrum quis posuere quis, convallis sit amet nisi. Aenean ac pellentesque metus. Phasellus luctus sapien at massa interdum lacinia. Suspendisse lacus eros, luctus pellentesque diam a, tempor semper nunc. Vestibulum accumsan nec felis vitae finibus. In viverra aliquet est, eu semper tellus. Etiam interdum dignissim euismod. Curabitur iaculis tellus at semper suscipit. Quisque sed risus neque.</p>
<p>Phasellus tincidunt diam id finibus tempor. Pellentesque vel ultrices neque. Suspendisse potenti. Pellentesque eget gravida sapien. Pellentesque malesuada bibendum viverra. Phasellus at ante nec turpis placerat placerat. Pellentesque sed nisl ut eros finibus faucibus. Duis dignissim ut sapien eget faucibus. Mauris sem risus, consequat scelerisque dui quis, consectetur vestibulum nisi. Morbi nisl nisl, lobortis vel risus rhoncus, accumsan scelerisque nisi.</p>
<p>Maecenas odio arcu, aliquet in accumsan id, blandit vitae tortor. Nunc nec aliquet nisl. Nullam tempus turpis dolor, quis vestibulum tortor mollis vel. Sed sed ultrices ex. Curabitur accumsan arcu nec elit molestie tristique in quis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam varius sapien gravida finibus euismod. Mauris semper consectetur massa, ut sagittis arcu. Mauris suscipit lectus id dolor semper lacinia.</p>
<p>Nunc a arcu diam. Fusce at mauris molestie, tempor nulla sed, mollis odio. Cras commodo nibh a felis aliquet tempor. Donec vitae nisi ut leo tincidunt auctor. Nam eleifend non odio quis rutrum. Curabitur scelerisque orci vel felis accumsan finibus. Vivamus ut hendrerit diam, in blandit metus. Vestibulum mollis odio arcu, ac elementum leo iaculis sit amet. Vestibulum mollis mattis nunc molestie pulvinar. Etiam ante nibh, ullamcorper nec turpis id, pretium euismod nisi. Aliquam scelerisque, metus ac laoreet iaculis, nulla mauris tristique ligula, sed sagittis risus massa quis lectus. Maecenas nec nisl ullamcorper, vehicula dui et, hendrerit risus. Quisque volutpat urna imperdiet lobortis molestie. Quisque at dapibus quam. Etiam neque mi, bibendum sit amet facilisis a, ullamcorper a enim.</p>
<p>Cras quam massa, facilisis ut elementum vel, maximus ut augue. In sem odio, blandit eu urna eget, sollicitudin convallis eros. Praesent eget lorem nec lorem faucibus euismod. Phasellus ullamcorper tristique velit sed facilisis. Etiam et lectus fringilla, tristique urna sit amet, sagittis lacus. Phasellus at erat malesuada, imperdiet nunc vel, tempor mi. Vestibulum vulputate felis sed lectus fermentum dignissim. Quisque dictum posuere tincidunt. In sit amet ante sodales, iaculis ipsum sit amet, dignissim ex. In nec turpis leo. Donec iaculis pulvinar neque nec maximus.</p>
<p>Cras auctor posuere dolor. Quisque venenatis risus sit amet lacus viverra, vitae placerat sem scelerisque. Curabitur id pellentesque lacus. In mi eros, tincidunt nec est id, auctor elementum felis. Aenean varius elementum aliquam. Fusce vehicula ipsum eget enim tincidunt, id maximus felis condimentum. Suspendisse at dignissim enim, vitae viverra sem.</p>
<p>Vivamus vitae mi id mauris varius pretium. Mauris eu nibh nec eros varius placerat. Mauris ut nulla consectetur, egestas ante id, congue leo. Vestibulum sit amet ipsum ligula. Suspendisse sed dui sed ante tempor volutpat. Duis placerat, augue non sagittis ultrices, nibh arcu fringilla dolor, eu vestibulum mi lectus et quam. Sed euismod eget neque ut venenatis. Cras metus sem, malesuada id tristique vitae, aliquet et felis. Vivamus sed elementum tortor, eget cursus mi. Suspendisse dui est, feugiat vulputate velit ac, consectetur viverra mi. Aenean porttitor turpis leo, a convallis lacus tincidunt at. Pellentesque quam nulla, dictum id sem maximus, aliquet maximus lorem.</p>
<p>Mauris ut porttitor purus, a sagittis purus. Cras at mauris nec est aliquam malesuada ut at diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales vestibulum dui vitae eleifend. Proin a lacus id lacus pulvinar aliquet. Donec vel eros sem. Fusce pharetra tincidunt odio ac malesuada. Aliquam pellentesque purus non rhoncus fermentum. Integer ultrices id neque id congue. Quisque mollis non velit quis tincidunt. Pellentesque semper commodo massa, vitae dapibus leo feugiat vel. Duis sit amet dignissim nibh.</p>
<p>Curabitur vitae pharetra mi. Nullam id ligula sed orci cursus suscipit a ut erat. In non fermentum neque. Aenean quis luctus tellus, sit amet accumsan leo. Aenean vel libero rhoncus, cursus nisl non, maximus lorem. Aliquam facilisis leo leo. Maecenas semper nunc arcu, eu blandit ante posuere sed. Phasellus dapibus purus lacus, interdum dapibus est tristique vel. Mauris luctus est a orci ultricies, vel gravida diam porta. Donec fermentum vestibulum bibendum. Quisque pretium maximus sollicitudin. Praesent mollis neque nisl. Praesent dignissim porttitor commodo. Donec non sapien fringilla, iaculis ante sed, consectetur quam. Maecenas condimentum lorem leo, at varius nisi malesuada sit amet. Sed vehicula magna leo, id accumsan ex ultricies eget.</p>
</div>
</div>
CSS:
/* Fonts */
/** Garamond Cormorant (regular, italic, bold and bold italic) **/
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i');
/* General / boilerplate styles */
/** Page **/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 6.25%; }
body { margin: 0; }
/** Typography **/
body { font-family: 'Cormorant Garamond', serif; font-size: 16em /* 16px */; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
h1 { font-size: 4em; } h2 { font-size: 3.5em; } h3 { font-size: 3em; }
h4 { font-size: 2.5em; } h5 { font-size: 2em; } h6 { font-size: 1.5em; }
p { font-size: 1em; line-height: 1.5; }
.paragraph { text-indent: 2em; }
.center { text-align: center; }
.justify { text-align: justify; }
blockquote { margin: 1rem 4em 1rem 4em; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
html[lang="fr"] q { quotes: "\00ab" "\00bb"; }
cite { font-style: normal; }
cite:before { content: "\0020\2014\0020"; }
/** Media **/
figure { margin: 1em; text-align: center; }
#media (min-width: 750px) {
.inline-left { float: left; margin: 1em 1em 1em 0; }
.inline-right { float: right; margin: 1em 0 1em 1em; }
}
figure img { display: inline; max-width: 100%; margin: 0.5em 0; }
.greyscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.sepia { -webkit-filter: grayscale(100%); filter: sepia(100%); }
/* Thematic styles */
body {
padding: 1em;
background: url(https://images.freecreatives.com/wp-content/uploads/2016/02/Download-High-Quality-Wood-Background-Wallpaper-for-Your-Desktop.jpg);
background-repeat: repeat;
}
.page {
width: 600px;
height: 800px;
margin: 0 auto;
margin-bottom: 1em;
padding: 2em;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
background: #F8ECC2;
color: #0c0d0d;
overflow: hidden;
}
JQUERY:
// On document load...
$(document).ready(function() {
// For each page...
$('.page').each(function () {
// Get page height
var pageHeight = $(this).height();
// Initialize content height
var contentHeight = 0;
// For each element of the page...
$(this).children().each(function () {
// Add element height to overall content height
contentHeight += $(this).outerHeight();
// When the content height becomes greater than the page height...
if (contentHeight > pageHeight) {
// Append a new '.page' to the '#page-container'
$(this).parent().after('<div class="page"></div>');
// Append the current, overflowing element to the next page
$(this).appendTo($(this).parent().next($('.page')));
}
});
});
});
If any of this is unclear, the Codepen should clear it up nicely.
https://codepen.io/christophercostello/pen/yXPBaN

Whenever you are in a loop, return false to exit it
Your code is correct, there is no code to execute when returning false, so nothing happens.
$.each(array, function(idx, value){
if(condition){
return true; // this will go to the next iteration
}else {
return false; // this will exit the loop
}
});
If you are in a for loop, make the condition false or break.
for(i = 0; i < arr.length; i++){
if(condition){
break;
}else {
// do stuff
}
}

How can I make my sidebar fixed after a certain size?

I see this sample:
link
If you do come down ... you see the sidebar on the right becomes fixed after a certain size ... you actually get down to almost everything.
How it was made an event the example?
With JQuery?
This is the link to my site
I tried to do something similar but incomplete
CODE JS:
$(window).scroll(function() {
var height = $(window).scrollTop();
console.log(height);
if(height > 700) {
//alert("test");
//after a certain size should be fixed ... what code should be here?
}
});
Did you have any idea as an example?
Can you help me solve this problem please?
Thanks in advance!

Here the example of not smooth scrolling of div.
(function($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 20;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 0);
});
})(jQuery);
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
.group:after { content: ""; display: table; clear: both; }
body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }
.wrapper { width: 100%; max-width: 700px; padding: 3%; }
.content, .sidebar { float: left; }
.content { width: 68%; margin-right: 5%; }
.sidebar { width: 27%; }
.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
<div class="wrapper group">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod arcu ut diam maximus auctor. Sed malesuada maximus tellus, dignissim volutpat urna hendrerit at. Cras nisi turpis, mattis vitae ornare ut, bibendum et massa. Nulla at tellus a arcu luctus ultrices ac non felis. Maecenas euismod efficitur ipsum vel vestibulum. Nam imperdiet ipsum nunc, sit amet varius felis maximus quis. Etiam efficitur, mauris placerat luctus facilisis, ligula sem pellentesque nunc, ac viverra tellus velit sit amet purus. Proin a nunc id quam tempor blandit vitae id orci. Cras lectus turpis, varius nec elementum venenatis, suscipit ut nisl.</p>
<p>Nulla condimentum est in leo mollis, sit amet varius erat pulvinar. Donec posuere turpis non est ultrices lobortis. Donec commodo aliquam sodales. Ut id finibus velit. Aenean tempus eget nulla at condimentum. Ut a arcu quis dui ultricies efficitur. Vestibulum suscipit diam ullamcorper velit tempor, in ullamcorper odio sollicitudin. Vestibulum congue nisl nibh, ut elementum quam tristique non. Nulla in sollicitudin dolor. Morbi ac justo nulla. Suspendisse massa neque, vestibulum id dolor non, congue rhoncus nibh.</p>
<p>Phasellus porta tellus vel ipsum vehicula, nec fermentum lectus porta. Aenean viverra magna eu risus lacinia malesuada. Sed molestie auctor pharetra. Aliquam erat volutpat. Vestibulum in mi a orci tincidunt pellentesque. Sed et lectus eros. Nam imperdiet neque eu dolor gravida, interdum pellentesque justo rhoncus. Morbi tincidunt, ex nec pellentesque pulvinar, dui nulla tempor ipsum, sed consequat est tortor at neque. Suspendisse sed consequat urna. Nullam luctus, sem convallis volutpat mollis, sapien odio finibus elit, vitae fringilla enim leo sed velit. Vivamus fringilla ante laoreet blandit porta. Sed condimentum ut erat nec dignissim.</p>
<p>Morbi ac scelerisque metus. Donec rhoncus diam urna, nec aliquet ex mollis ut. Sed a arcu ac risus semper pellentesque ut non nibh. Phasellus eu ullamcorper sem. Maecenas at tortor faucibus, consequat risus sed, egestas sapien. Suspendisse tortor lacus, congue sed velit vel, dictum sagittis eros. Proin eu nisl viverra, mattis velit vitae, tempor turpis. Ut sodales lacus in iaculis faucibus. Integer non metus non nulla malesuada rutrum ac non ipsum. Vivamus quam diam, suscipit sed velit vel, tincidunt imperdiet urna. Praesent dapibus augue a dignissim lacinia. Nullam pharetra volutpat ligula, quis aliquet mauris pharetra nec. Etiam finibus, neque in laoreet vehicula, lorem justo feugiat velit, ac accumsan neque lacus non tellus. Aliquam quis sagittis massa, a bibendum enim.</p>
<p>Morbi vel elementum libero, vitae viverra est. Pellentesque sollicitudin neque at ligula suscipit, vel faucibus mauris consequat. Donec quis pharetra nulla, at tristique lacus. Nunc vel magna ultricies, hendrerit purus et, rhoncus dolor. Aliquam erat volutpat. Phasellus auctor malesuada augue, a iaculis sem mattis quis. Nulla facilisi.</p>
</div>
<div class="sidebar">
<div class="box">
First box
</div>
<div class="box">
Second box
</div>
<div class="box follow-scroll">
Third box (follows screen)
</div>
</div>
</div>