We Keep Coding

Enable scrolling the background when the modal is closed using the back key instead of the modal close button

I have the following code for opening a modal box and then closing it using its inbuilt close button. Also, it has a feature: When the modal is open, one can scroll inside the modal box but can't scroll through the background stuff. Here, background stuff means anything that I have before opening the modal.
The point is if I use browser back-arrow or mobile back key to close the modal, then it is possible to close the modal, but once I close the modal using these external sources, the scrolling of background stuff is disabled.
So, what do I want?
I want a code that has all features of the previous code; and
I can use the browser back-arrow or mobile back key for closing the modal similarly as I use the inbuilt close button of the modal for the same purpose.
HTML:
<a class="button" href="#modal28" style="font-size:50px" onclick='return disableScrolling()' >
Open Button
</a>
<div class="popup" id="modal28">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup_close; button" href="#close" onclick='return enableScrolling()' style="text-decoration:none; color:yellow; font-size:20px; background-color: black; border-radius: 90px;
border: 3px solid #00d7c3; padding: 0px 15px; podition:relative; transform: translate(0%, 80%); text-align: center;" >
Close Button
</a>
<center><div class="frame">
<br/> <br/>Inside of Modal. Here I can scroll without scrolling the background stuff.
</div></center>
</div>
</div>
<h1><center>Background Stuff</center> </h1>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
CSS:
<style>
#import 'https://fonts.googleapis.com/css?family=Prompt:400,700';
body{ font-family: 'Prompt', sans-serif;}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
right: 20px;
font-family: 'Prompt', sans-serif;
text-decoration: none;
}
.button {
background-color: transparent;
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
color: black;
}
.button:hover {
box-shadow: 0 0 0px 0 #fff inset, 0px 0px 15px 15px #fff;
}
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 0;
background: #000;
background-image: repeating-linear-gradient(
to bottom,
transparent 7px,
rgba(0, 0, 0, 0.8) 9px,
rgba(0, 0, 0, 0.8) 13px,
transparent 13px
);
color:white;
overflow: auto;
}
.popup__close {
position: absolute;
}
</style>
JavaScript for scrolling before/after closing popup modal box:
<script>
function disable(){
document.body.style.overflow = 'hidden';}
function enable(){
document.body.style.overflow = 'scroll';}
function disableScrolling() {
disable();}
function enableScrolling() {
enable();}
</script>

Problem in animate scrollTop for multi div

I have two div with id (# left-div - # right-div). In # left-div i have multi div with id and # left-div's overflow-y is scroll. In # right-div i have multi button with id. I want after click on each button, # left-div scroll to show Specific div that button clicked. I use jquery. How to create this action?
This is my code:
<div id="#left-div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="#right-div">
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
</div>

What you can do is have the same class for a div and it's associated button.when the button is clicked you can get elements which have that class and scroll to the first element.
$(document).ready(function() {
$("button").click(function() {
var element = $(this);
var className = element.attr("class");
var x = document.getElementsByClassName(className);
$("html, body").animate(
{
scrollTop: $(x[0]).offset().top
},
2000
);
});
});
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: green;
}
#div4 {
background-color: blue;
}
#left-div {
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<div id="left-div">
<div id="div1" class="element1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div2" class="element2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div3" class="element3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div4" class="element4">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
</div>
</div>
<div class="col-4">
<div id="right-div">
<button id="btn1" class="element1">Bt1</button>
<button id="btn2" class="element2">Btn2</button>
<button id="btn3" class="element3">Btn3</button>
<button id="btn4" class="element4">Btn4</button>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Sidebar layout where only the content div is scrollable

I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.

You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>

No scroll on hero until content is scrolled

I'm having difficulty creating this effect where the content in the hero is completely scrolled through (100% of the viewport) then the other sections of the page will show. I set it so the background is fixed. The stage div (which should be vertically centered) should come as you are scrolling with bottom padding separating and the second section should not show until fully scrolled. Not entirely sure what I am doing wrong. Code and codepen is below
http://codepen.io/anon/pen/xRPeJj
$(document).ready(function(){
var windowHeight = $(window).height();
$('#stage_1').css({"height": windowHeight + 'px'});
$('#stage_1').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
$('.second-section').css("background-attachment", "scroll");
}
});
});
body, html {
height: 100%;
margin: 0;
}
.container {
padding: 0 1em;
margin: 0 auto;
width: 1000px;
}
.hero {
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
width: 100%;
height: 100vh;
flex-direction: column;
}
#stage_1 {
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div id="stage_1">
<div class="hero__text">
<h1>lorem to<span>the Rocks</span></h1>
<h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet! </h2>
</div>
</div>
<div id="stage_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>

show a fixed bottom footer on scroll up

I want to show a footer fixed to the bottom of the screen only when the user scrolls up. Similar to Medium Posts
I have the effect working on my header but I can't get it to work for my footer
Fiddle
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var footerHeight = $('blog-footer').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta) {
return;
}
if (st > lastScrollTop && st > footerHeight) {
$('blog-footer').removeClass('footer-down').addClass('footer-up');
} else {
if (st + $(window).height() < $(document).height()) {
$('blog-footer').removeClass('footer-up').addClass('footer-down');
}
}
lastScrollTop = st;
}
.blog-footer {
position: fixed;
width: 100%;
background: red;
bottom: 0;
height: 100px;
}
<div class="blog-footer footer-down">
<p>Content</p>
</div>
Can anyone see what I'm missing to get this to work?

You have a small (read serious) error. May be a typo! That's $(".blog-footer") with a ..
Added a snippet for the same, in a simpler way. See the JavaScript and CSS part please.
$(function () {
last_scroll_position = $(window).scrollTop();
$(window).scroll(function () {
if (last_scroll_position > $(window).scrollTop())
$("footer").addClass("show");
else
$("footer").removeClass("show");
last_scroll_position = $(window).scrollTop();
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 5px; text-align: justify;}
footer {height: 50px; line-height: 50px; width: 100%; text-align: center; background-color: #f99; position: fixed; bottom: -50px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
footer.show {bottom: 0;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p>Can we do something easier and similar instead of all those math?</p>
<p>Some long content now.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<footer>Footer Here</footer>

Made another version of this: https://jsfiddle.net/h23oe67L/1/
Not that much jQuery (I think we could actually remove it all together):
var distanceToTop = 0;
var $window = $(window);
var header = $('.header');
var footer = $('.footer');
$window.scroll(function () {
if ($window.scrollTop() < distanceToTop) {
// we have scrolled up
header.removeClass('header-up');
header.addClass('header-down');
footer.removeClass('footer-down');
footer.addClass('footer-up');
} else {
// we scrolled down (or to the sides, make a separate case for this)
header.removeClass('header-down');
header.addClass('header-up');
footer.removeClass('footer-up');
footer.addClass('footer-down');
}
distanceToTop = $window.scrollTop();
});