Develop Reference

Horizontal scroll jquery-mousewheel library function errors (ex: this. on is not a function)

I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!

The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.

Jquery modals trigger button position

I was looking to trigger different sticky buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
Everything works fine so far.
My problem is that when first modal is open with all the article details,
I can see the button from the second modals. I tried organizing some specs of the z-index but is not working with the sticking class of my divs.
I was wondering what I have to modify in my Javascript code to make visible just the article without any buttons of modals shown.
Any ideas to what I should fix in my fiddle to make it work correctly?
Here my fiddle: https://jsfiddle.net/CAT999/48rd76mp/5/
my snippet code is here below
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<meta name="description" content="CAT is a designer and art director" />
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--SECTION-1-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="uno">
<img src="https://media.endclothing.com/end-features/prodfeatures/5ee628543c59bce18d2dd4614c7aa1b5ca8bca0f_end.-hiroshi-fujiwara-moncler-genius-interview12.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-1-->
<button class='btn-1 modal-btn'>Open Modal 1</button><div class="overlay" id="YourModalBox">
<span onclick="document.getElementById('YourModalBox').style.display='none'" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-1-->
</div></div></div>
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--SECTION-2-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-2-->
<button class='btn-2 modal-btn'>Open Modal 2</button><div class="overlay" id="YourModalBox2">
<span onclick="document.getElementById('YourModalBox2').style.display='none'" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-2-->
</div></div></div>
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face">
<div class="sticky"><div class="sticky-button">
<!--MODAL-3-->
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
<div class="overlay" id="YourModalBox3">
<span onclick="document.getElementById('YourModalBox3').style.display='none'" class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div></div>
<!--MODAL-3-->
</div></div></div>
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
*{ z-index: 999999;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:100;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);

You can try my changes:
Moved modals outside of .sticky element
Made .modal-btn's onclick move up DOM parents and find nextElementSibling
Fixed the crazy z-index that was on *{} in CSS
Fixed z-index of the .modal-btn
Added z-index to .overlay
Removed the .close-button click event
Added a global clear of .overlay--open from .overlay when .close-button is clicked.
JSFiddle here: https://jsfiddle.net/o0aq92r7/2/
const modalBtns = document.querySelectorAll('.modal-btn');
const closeBtns = document.querySelectorAll('.close-button');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.parentElement.parentElement.nextElementSibling
overlay.classList.add('overlay--open');
}
});
closeBtns.forEach(cBtn => {
cBtn.onclick = function() {
const overlayElements = document.querySelectorAll('.overlay');
overlayElements.forEach(overlay => {
overlay.classList.remove('overlay--open');
});
}
});
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
* {
z-index: 1;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:2;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
z-index: 5;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<meta name="description" content="CAT is a designer and art director" />
</head>
<body>
<div class="img-container" id="uno">
<img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg"
alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-1 modal-btn'>Open Modal</button>
</div>
</div>
<!--MODAL-1-->
<div class="overlay" id="YourModalBox">
<span class="close-button topright">×</span>
<div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt</span></div>
</div>
<!--MODAL-1-->
</div>
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-2 modal-btn'>Karl info</button>
</div>
</div>
<!--MODAL-2-->
<div class="overlay" id="YourModalBox2">
<span class="close-button topright">×</span>
<div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt</span></div>
</div>
<!--MODAL-2-->
</div>
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg"
alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
</div>
</div>
<!--MODAL-3-->
<div class="overlay" id="YourModalBox3">
<span class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span></div>
</div>
<!--MODAL-3-->
</div>
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->
</body>
</html>

How to toggle multiple classes in vanilla JavaScript?

I seem to be running into a bit of issues with by off canvas navigation.
I'm trying to toggle two classes on one event listener, it's working with the nav menu, but it's not toggling the class on the .Site element. What am I doing wrong?
I'm trying to have the .Site element add a class to set the margin-left to 20% and have a width of 80% while the off canvas menu gets the width of 20% from 0. The Navigation works, but the .Site toggle doesn't work.
let navToggle = document.querySelector('.menuButton');
let nav = document.querySelector('.SiteNavigation');
let site = document.querySelector('.Site');
navToggle.addEventListener('click', (event) => {
nav.classList.toggle("SiteNavigationOpen");
site.classList.toggle("SiteNavOpen");
});
#use postcss-nested;
#use postcss-simple-vars;
html {
background: #fff;
scroll-behavior: smooth;
line-height: 1.15;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
text-shadow: none;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / (7680 - 320)));
}
html,
body {
font-family: 'Lato', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.1rem;
}
h1 {
font-size: 2.25rem
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75em
}
h4 {
font-size: 1.5rem
}
h5 {
font-size: 1.25rem
}
h6 {
font-size: 1rem;
}
p {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 1.1rem;
font-weight: 300;
}
p.--mousePrint {
font-size: 0.8rem;
}
.textCenter {
text-align: center;
}
.Site {
width: 100%;
margin-left: 0;
}
.SiteNavOpen {
width: 80%;
margin-left: 20%;
}
.menuButton {
position: absolute;
top: 1vh;
right: 1vw;
border: none;
background: none;
color: #eaeaea;
}
.SiteHeader {
min-height: 100vh;
background: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center center;
background-size: cover;
background-attachment: fixed;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #eaeaea;
filter: sepia(40%);
}
.siteBranding {
display: flex;
flex-direction: column;
}
.siteBranding a {
color: #eaeaea;
}
.SiteMain {
background: #eaeaea;
color: #353535;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.mainInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.articleMain {
max-width: 33em;
margin: 0 auto;
}
.--textCenter {
text-align: center;
}
.SiteNavigation {
background: #66023c;
color: #eaeaea;
height: 100vh;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.13s;
}
.SiteNavigationOpen {
width: 20%;
}
.SiteNavigation a {
color: #eaeaea;
}
.SiteNavigation li {
transition: all 0.13s;
}
.SiteNavigation li:hover {
transform: scale(1.2, 1.2);
}
.Site {
width: 100%;
margin-left: 0%;
transition: all 0.13s;
}
.SiteColophon {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.colophonInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.SiteFooter {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.footerInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.socialMedia {
text-align: center;
}
.fab:hover {
transform: scale(1.2, 1.2);
}
.--btnLink {
background: none;
color: none;
border: none;
}
.socialMediaButton {
transition: all 0.13s;
}
.socialMediaButton:hover {
transform: scale(1.5, 1.5);
}
<nav class="SiteNavigation">
<ul class="nav">
<li>HOME</li>
<li>SERVICES</li>
<li>THEMES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="Site">
<header class="SiteHeader">
<button class="menuButton">
<i class="fas fa-bars"></i>
</button>
<div class="siteBranding">
<h1 class="textCenter">TEOTIHUACAN DESIGN</h1>
<p class="textCenter">Quality Websmiths</p>
<button class="btn --btnLink alignCenter"><i class="fas fa-arrow-circle-down fa-2x"></i></button>
</div>
</header>
<main id="main" class="SiteMain">
<div class="mainInner">
<article class="articleMain">
<header class="articleHeader">
<h1 class="--textCenter">Niltze! (it means Hello!)</h1>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere molestiae ex qui laudantium, nobis voluptate quaerat suscipit veritatis ducimus animi corporis, perspiciatis aliquam aliquid! Corrupti dicta magnam autem labore quo.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In obcaecati, consequatur sed officiis deleniti maxime reprehenderit possimus fugiat officia quasi, nemo doloremque numquam pariatur doloribus! Tempora facere harum earum provident nulla,
ipsam quos animi minus esse nihil! Tempore officiis possimus facilis sint, vel id ipsam obcaecati dolor dolorem suscipit molestias aliquam quaerat itaque distinctio beatae voluptates nostrum nesciunt voluptate? Quae temporibus vitae molestias
magnam sed, nostrum ducimus nulla, totam ad nihil aut magni asperiores natus esse quasi omnis quod voluptatem? Molestiae, possimus eos quis eveniet rerum tenetur aliquam ullam nemo? Laudantium ratione perspiciatis possimus quos quaerat quibusdam,
labore quod deserunt temporibus assumenda ipsam quasi repudiandae maiores quia sed architecto culpa nam cum veritatis fugiat itaque! Accusantium eos velit sunt quia soluta perspiciatis laudantium iste, neque minus consequuntur tempora incidunt
aliquid!</p>
</article>
</div>
</main>
<section class="SiteColophon">
<div class="colophonInner">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque laborum ipsam dolores nisi nesciunt. Doloribus recusandae rem aliquam veniam, soluta repellat earum, alias accusamus ipsam dolorum quo voluptatum dolor dolore.</p>
</div>
</section>
<footer class="SiteFooter">
<div class="footerInner">
<p class="--mousePrint textCenter">Copyright © 2020 Teotihuacan Design. Powered by WordPress</p>
<div class="socialMedia">
<button class="btn --btnLink socialMediaButton"><i class="fab fa-facebook"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-twitter"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-instagram"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-behance"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-dribbble"></i></button>
</div>
</div>
</footer>
</div>

I've checked your code and the classes apply correctly. If you inspect the divs you can see the classes applying.
The problem is in .SiteNavOpen CSS. Add the !important tag because width and margin-left get overwritten by .Site. Or, to avoid doing that add that CSS to .Site .SiteNavOpen. Like this:
.SiteNavOpen {
width: 80% !important;
margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
width: 80%;
margin-left: 20%;
}
Also I would suggest you start using the DevTools in your browser. If a class CSS gets overwritten and ignored by another class you can see that there and realize where the problems come from.

Placing a banner at the bottom of a web site pushing all elements up

I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.
Does anyone have an idea, how this can be done in JavaScript/css configuration?
I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);
The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.
Thanks,

Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;
}
p {
line-height: 1.5;
}
.text-center {
text-align: center;
}
.bg-black {
background: #212121;
}
.bg-black a {
color: #efefef;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu.horizontal-menu li {
display: inline-block;
font-size: 0;
}
ul.menu.horizontal-menu li a {
font-size: 12px;
}
ul.menu.vertical-menu li {
display: block;
}
ul.menu.vertical-menu li a {
display: block;
padding: 5px 10px;
}
.header {
display: flex;
}
.header .branding {
margin-right: 0;
height: 52px;
line-height: 52px;
}
.header nav {
margin-left: auto;
}
.header nav ul li a {
height: 52px;
display: table-cell;
vertical-align: middle;
}
.content-sideber {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.content-sideber .content {
width: 75%;
}
.content-sideber .sidebar {
width: 25%;
}
#media (max-width: 575px) {
.content-sideber {
flex-direction: column;
}
.content-sideber .content,
.content-sideber .sidebar {
width: 100%;
}
}
.footer {
margin-top: auto;
padding: 0 10px;
}
<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li>Lorem ipsum dolor sit</li>
<li>Consectetur adipisicing</li>
<li>Atque excepturi corporis</li>
<li>Officiis magnam</li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>

HTML & CSS: Scroll on Y but stick on X

I have a main div that is inside wrapper which is scrollable. Now I want to have a left div on the left side of the main div. I want the Y-Axis to scroll with the main div but when I scroll horizontally it should stick to the left of the 'wrapper`.
I hope that makes sense.
So far I have this:
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
overflow: scroll;
}
.left {
position: absolute;
width: 100px;
height: 100%;
left: 0;
background: lightsalmon;
}
.main {
position: relative;
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="main">
<div class="left">
LEFT
</div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
But I don't know how I should do the "stick to the left of wrapper" part. Is that possible with pure HTML & CSS or do I need some JavaScript for this?

Is this what you want?
Using block model:
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
}
.wrapper>div {
display: inline-block;
float: left;
}
.left {
width: 100px;
height: 100%;
background: lightsalmon;
}
.main-wrapper {
width: 400px;
height: 500px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
Can also be achieved with flexbox model:
.wrapper {
display: inline-flex;
width: 500px;
height: 500px;
margin: 100px;
}
.wrapper>div {
display: block;
}
.left {
flex: 0 0 100px;
background: lightsalmon;
}
.main-wrapper {
flex: 0 0 400px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
Condition (for both) is taking .left outside of .main and wrapping .main in its own overflow:auto (or scroll) wrapper.
If you want both divs to scroll horizontally, I guess you need an extra wrapper:
.height-scroller {
overflow: hidden auto;
height: 500px;
width: 500px;
margin: 100px;
}
.wrapper {
display: inline-flex;
height: 1000px;
}
.left {
flex: 0 0 100px;
background: lightsalmon;
}
.main-wrapper {
flex: 0 0 400px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="height-scroller">
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
</div>

I guess position: sticky is exactly what you want. (with a little flexbox)
Update: added .top as you wanted
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
overflow: scroll;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
.main .top {
position: sticky;
top: 0;
z-index: 1;
background-color: sandybrown;
}
.main .middle {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.main .middle .left {
position: sticky;
width: 100px;
left: 0;
background: lightsalmon;
}
<div class="wrapper">
<div class="main">
<div class="top">
TOP
</div>
<div class="middle">
<div class="left">
LEFT
</div>
<div class="right">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
</div>
In case someone also wants top to stick to left
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 500px;
width: 500px;
background-color: hotpink;
display: grid;
grid-template: 100px auto / 100px auto;
overflow: auto;
}
.main .top{
grid-column: 1 / span 2;
position: sticky;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
width: 500px;
}
.main .left{
position: sticky;
left: 0;
background-color: rgba(0,0,0,0.3);
color: #fff;
padding: 20px;
}
.main .right{
color: #fff;
padding: 20px;
width: 1000px;
height: 1000px;
}
<div id="app">
<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</div>

You can achieve this using a fixed menu. Checkout the answer. I guess this is what you are looking for. Since the left bar is fixedpositioned, the rest will come across it. SO you need to align the main to the right.
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
/*margin: 100px;*/
overflow: scroll;
}
.left {
position: fixed;
width: 100px;
height: 100%;
left: 0;
background: lightsalmon;
}
.main {
position: relative;
width: 1000px;
height: 1000px;
background-color: rosybrown;
margin-left:100px;
}
<div class="wrapper">
<div class="main">
<div class="left">
LEFT
</div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>