We Keep Coding

Navbar not displaying when in responsive mode

I am new to coding and busy developing a navbar for a responsive site. When the screen is 100% the menu is visible, but as soon as the browser is dragged smaller it is responsive and the menu is colapsing with a hamburger icon (three stripes). I have attempted to trouble shoot but was unsuccessful thusfar. Any assistance will be appreaciated!
<!--Navbar-->
<nav class="navbar">
<div class="navbar__container">
NEXT
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
Tech
</li>
<li class="navbar__item">
Products
</li>
<li class="navbar__btn">
Sign up
</li>
</ul>
</div>
Css:
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 58vh;
z-index: -1;
background: #131313;
}
.navbar__menu:active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 58vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
Java Script:
const menu = document.querySelector('#mobile-menu');
const menu = document.querySelector('#mobile-menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});

Lightbox2, trouble with horizontal photo and order to display photos

I have a problem with the Lightbox2 made by Lokesh.
https://lokeshdhakar.com/projects/lightbox2/
I am v2.11.3 and the display of horizontal photo is on the top of the screen in mobiles devices. I have try different options but doesn't work.
Another problem es the order the photos are displaying by Lightbox, I am using Colcate for horizontal grid, so the image follow left to right order but the Lightbox show me the photos follow the vertical order top to bottom, I don't know how I can fix it.
(https://user-images.githubusercontent.com/73562012/108930646-68c95c00-769a-11eb-9c71-ec83b816f2da.png)
leave you part of my code,
the file lightbox-plus-jquery.min.js you que find in the lokesh's page
thanks!
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<div class="container gallery">
<div class="grid">
<!-- current -->
<div class="grid-col grid-col--1">
</div>
<div class="grid-col grid-col--2">
</div>
<div class="grid-col grid-col--3">
</div>
<div class="grid-col grid-col--4">
</div>
<div class="grid-col grid-col--5">
</div>
<div class="grid-item">
<a href="images/urban//urban7-david-porter.jpg"
data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban7-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban00-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban00-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
<div class="grid-item">
<a href="images/urban/urban10-david-porter.jpg" data-lightbox="roadtrip"
data-title="Urban - oil on canvas">
<img src="images/urban/urban10-david-porter.jpg" alt="Urban, canvas on oil, David Porter" width="100%">
</a>
</div>
</div>
</div>
<!-- colcate- grid -->
<script src="https://unpkg.com/colcade#0/colcade.js"></script>
<script>
var colc = new Colcade( '.grid', {
columns: '.grid-col',
items: '.grid-item'
});
</script>
<!-- lightbox -->
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
lightbox.option({
resizeDuration: 200,
wrapAround: true,
fadeDuration: 2000,
fitImagesInViewport: true,
wrapAround: true,
});
</script>
my css
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #EDE7E5;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.2em;
}
.lb-data .lb-caption {
font-size: 1rem;
font-weight:;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #424242;
}
.lb-data .lb-number {
display: block;
text-align: left;
width: 100% !important;
padding-bottom: 1em;
font-size: 12px;
color: #C7C2C0;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}

Convert JQuery to JS for toggle class

I am creating a mobile menu and found an example on Codepen, the only problem is that I don't want to load JQuery just for the menu. I'm fairly new to coding and was wondering if there was a way to convert the toggle class function to pure javascript. If you could make a working example that would be ideal. Also if you know of a tool to convert to javascript or something that lists what each function looks like in both so I could covert it myself, that would be good to know.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
font-family: Helvetica Neue, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
/* ------------- */
.menu {
position: absolute;
top: 20px;
right: 20px;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: #fff;
color: #333;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
/* ------------- */
.info {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay-info {
text-align: center;
color: #111825;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="info">Content</h1>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<h1 class="overlay-info">
Links
</h1>
</div>

Got it working using onclick="myFunction" and
function myFunction() {
var menu = document.getElementById("something");
var overlay = document.getElementById("somethingelse");
something.classList.toggle("open");
somethingelse.classList.toggle("open");
}

Pure CSS Parallax with JS/jQuery Scroll

I've managed to create a Pure CSS Parallax, however, I'm having some difficulty with scrollTop while overflow: hiddenis applied to html.
The CSS requires overflow: hidden either on the html tag or whatever relevant container and overflow-x: hidden; overflow-y: auto on the body tag or whatever relevant container.
In any case where the overflow is applied, whether on html and body tags or otherwise, scrollTop does not work.
I have been able to detect scroll on the body, either to trigger an alert or to addCLass, but I would like to removeClass once the user scrolls back up to the top of the page.
Here's my code, so far, this is after trying various other normal solutions that work with overflow removed from the html element. This solution only adds the relevant class on scroll.
HTML
<header>
</header>
<div class="parallax">
<div class="background"></div>
<div class="sheet-1">
<h1 class="page-header">My Parallax</h1>
</div>
<div class="sheet-2"></div>
</div>
SASS
\:root
font-size: 10px
*, *::before, *::after
box-sizing: border-box
margin: 0
padding: 0
text-decoration: none
html
overflow-y: auto
body
height: 100vh
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
perspective: 0.1rem
header
height: 5rem
width: 100%
background: black
opacity: 0
position: fixed
top: 0
left: 0
z-index: 999
transition: opacity 1.5s ease
&.black
opacity: 1
transition: opacity 1.5s ease
.parallax
transform-style: preserve-3d
.background
height: 100vh
width: 100%
background: url('https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg')
background-size: cover
transform: translateZ(-0.1rem) scale(2)
position: relative
[class*='sheet-']
min-height: 100vh
display: flex
align-items: center
.sheet-1
position: absolute
top: 0
left: 0
transform: translateZ(-0.05rem) scale(1.5)
.page-header
color: white
font-size: 4rem
text-align: center
text-transform: uppercase
letter-spacing: 0.15rem
margin: 0 auto
.sheet-2
background: url('https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg') no-repeat center center
background-size: cover
JS
$("body").on("scroll",function(){
$('header').addClass('black');
});
You can view the project on Codepen here.

This situation was able to be resolved by monitoring the scroll event on the container.
In advance,sorry for the poor organization and structuring of the classes. Was roughing through some old code.
Compiled HTML
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
Compiled CSS
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
Javascript
// Get Scroll Position
var prlx = document.getElementById("prlx");
prlx.onscroll = function prlxAnimation() {
var prlx = document.getElementById("prlx");
var scrollPos = prlx.scrollTop;
var header = document.getElementById("backdrop");
// document.getElementById ("pos").innerHTML = y + "px"
if(scrollPos > 10){
header.classList.add("black");
}
else {
header.classList.remove("black");
}
}
The same pen is still in use on Codepen here.

$(window).scroll(function(){
var scroll= $(window).scrollTop();
<script src="https://code.jquery.com/jquery-3.3.1.min.js"/>
$(window).scroll(function(){
var scroll= $(window).scrollTop();
$(".background").css("background-position","center "+(scroll*0.2)+"px");
});
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
hope this code works