We Keep Coding

Vanilla JS - Infinite Auto play Slider

I'm going to make a responsive slider that automatically plays.The code I had at first is this.
It's working properly.
However, I'm going to separate the code because it doesn't play automatically.
I tried to auto-play the slides through setInterval(slider,3000), but it didn't work properly.
Realizing that it is a problem caused by all the content in the 'function slider', I separated the button from the press to create two functions, but it did not work. I don't know what to do...
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active ~ .slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background:#222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

Because you are using event inside movement() function to see which button was pressed, you can supply a "dummy" object with the direction instead:
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
setInterval(function()
{
movement({target:{id:"next"}});
}, 3000);
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

Why does my navbar appear on top of scrollbar?

I'm trying to create my first website with parallax effect. I noticed a problem with my fixed top navbar - it appears on top of the scrollbar and overflow hidden doesn't hide it. I've tried to put it into .main-container and it kinda solves my problem: it's not on the top of scrollbar anymore, however, it stops being top fixed. What causes this problem? How can I fix it?
HTML:
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg" id="top-navbar">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" id='nav-icon' type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href="#">link</a>
</li>
</ul>
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link" href='#1'>link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#2'>link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#3'>link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#4'>link 4</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">link</a>
<a class="dropdown-item" href="#">link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class='main-container'>
<div class="parallax-container">
<div>
<h1>title</h1>
</div>
<a href="#1" id='main-anchor'>
<i class="large material-icons" style="font-size: 5rem" id='goto-icon'>
keyboard_arrow_down
</i>
</a>
</div>
<div id="wrapper" class='content-container'>
<div id="page-content" class="page content">
<span class="anchor" id="1"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="2"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="3"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
<span class="anchor" id="4"></span>
<section class="card text-white bg-dark mb-5">
<h4 class="card-header">Title</h4>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</section>
</div>
</div>
</div>
</body>
SCSS
// COLORS
$darker: #212529;
$dark: #35383C;
$gray: #605F5E;
$greenish: #0F5158;
$lightgreen: #21686E;
$blue: #7FA5A6;
$lightblue: #96B5B6;
$alabaster: #F1EBE1;
$gainsboro: #CEE0DC;
// SITE
body {
font-family: sans-serif;
background-color: $darker;
scroll-behavior: smooth;
}
.main-container {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
background-color: $darker;
a {
&:link,
&:visited,
&:hover,
&:active {
color: white;
}
}
}
.content-container {
position: relative;
display: block;
z-index: 1;
background-color: $darker;
min-height: 100vh;
}
.content {
margin: 0 auto;
padding: 75px 0;
}
.parallax-container {
color: white;
left: -9px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
position: relative;
z-index: -1;
height: 100vh;
width: 101vw;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
// NAVBAR
#top-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
font-size: 1rem;
z-index: 30;
line-height: 150%;
background-color: rgba(33, 37, 41, 0.1);
padding: 0 2.5vw;
transition: transform 1s .3s ease;
box-shadow: 0 1px 50px -28px $blue;
&.dark {
background: $darker;
}
&.dark-show {
background: $darker;
}
&.scrollUp {
transform: translateY(-100%);
}
* {
color: #bbccdd !important;
font-weight: 500;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 600;
padding: 0;
}
.nav-item {
text-transform: uppercase;
padding: 0 8px;
cursor: pointer;
// &:hover:not(.dropdown) {
// background-color: rgba(33, 37, 41, 1);
// }
a:hover {
color: white !important;
}
}
.nav-link {
margin: 10px 0;
&.active {
color: white !important;
border-bottom: 1px solid white;
}
}
.dropdown-menu {
border-color: $blue;
line-height: 2rem;
background-color: rgba(0, 0, 0, 0.1);
.dropdown-divider {
margin: 0;
border-top: 2px solid black;
}
.dropdown-item:hover {
color: white;
background-color: rgba(33, 37, 41, 0.1);
}
}
.navbar-toggler {
color: $blue;
}
}
// HAMBURGER
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $blue;
border-radius: 3px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 1px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 13px;
}
#nav-icon span:nth-child(4) {
bottom: 0px;
}
#nav-icon.open span:nth-child(1) {
top: 15px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 15px;
width: 0%;
left: 50%;
}
// CONTENT
#page-content {
height: 100vh !important;
padding: 15vh 10vw 5vh 10vw;
margin: 0;
}
.anchor {
display: block;
height: 15vh;
margin-top: -15vh;
visibility: hidden;
}
// MEDIA QUERIES
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#sidebar {
display: none;
}
#page-content {
margin: 0;
}
}
JS:
$(document).ready(function() {
$('#sidebar').css('transform', 'translateX(200px)')
$('#nav-icon').click(function() {
// $(this).toggleClass('open');
$('#top-navbar').toggleClass('dark-show');
});
$('.main-container').scroll(function() {
let pageHeight = $('.main-container').height();
$('#top-navbar').toggleClass('dark', $(this).scrollTop() > pageHeight);
$('section').each(function(i) {
var position = $(document).scrollTop();
var header = $('#top-navbar').outerHeight();
if ($(this).position().top <= (position + header)) {
var top = $(this).position().top;
console.log($(this).position().top <= (position + header));
$(".nav-link.active").removeClass('active');
$(".nav-link").eq(i).addClass('active');
}
})
});
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
let width = $(window).width();
let height = $(window).height();
if (height > width && height < 1024) {
let position = $('#page-content').scrollTop();
$('.main-container').scroll(function() {
let scroll = $('.main-container').scrollTop();
if (scroll > position) {
$('#top-navbar').addClass('scrollUp');
} else {
$('#top-navbar').removeClass('scrollUp');
}
position = scroll;
});
}
Link to jsfiddle: https://jsfiddle.net/strzesia/fhqok4ym/19/

You can use following css for navbar
.nav{
position:absolute;
left:0;
top:0;
}

I had the same problem while I was using a Bootstrap template from a teacher. I found out the problem was this line:
overflow-x: hidden;
I just removed and it solved the problem.

jQuery e.target with a $(document).on("click", function(e)

I have a function that closes the .modal when the user clicks away anywhere on document except for the modal.
$(document).on("click", function(e) {
if (
$(".apple-modal, .icon-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
The problem is that the fontawesome icon interferes with the .button target that opens the modal and the click zone is only the .button and not anything that is nested inside (the icon).
How do I change the function so that the modal opens even if the icon is clicked, and then loses it's .active class when the user clicks away?
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$(".button").on("click", function() {
const id = $(this).prop("id");
$(".modal").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
$(document).on("click", function(e) {
if (
$(".apple-modal, .icon-modal").hasClass("active") &&
!$(".modal, .modal *, .button").is(e.target)
) {
$(".modal").removeClass("active");
}
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<script src="https://pro.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>
<div class="modal icon-modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>
First</li>
<li>
Second</li>
<li>
Third</li>
</ul>
</div>

It's not very clear what you're exactly trying to do. Font Awesome does not interrupt the click event. I would consider using jQuery UI as well.
Consider the following code.
$(function() {
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$("body").not(".active").click(function(e) {
console.log("body click");
$(".active").removeClass("active");
});
$(".button").click(function(e) {
var el = $(".modal[data-id='" + $(this).attr("id") + "']");
console.log($(this).attr("id") + " clicked, remove class 'active' from all. Add 'active' to ", el);
$(".active").removeClass("active");
el.addClass("active");
console.log(el);
e.stopPropagation();
});
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
You can see here that I have adjusted the click callback. If you're not creating dynamic content, I would use .click() versus .on().
In this case, it may be best to remove active class from all then add it to the specific one element. .toggleClass() will do this, yet depending on the state of your script you may get varied results or unexpected results.
Making use of the right selector can also help a lot. Since we're targeting a specific .modal that has a data-id attribute, we can use $(".modal[data-id='icon']") as the selector to get that specific element.
Hope that helps.

Push Menu - How to push body

I have a menu that opens to the right. My issue is that I want the body to resize after I have opened the menu. The menu is 300px wide and I want the body to resize to take up the remainder of the screen. I saw a few examples, but all they do is shift the body so part of it is not visible and off screen. You can see my example here
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
``

As mentioned in the comment, this is what you could do. Add a class to your HTML body when the menu is opened and add a padding-right equals to the width of the menu.
$(".hamburger").on("click", function() {
$(".hamburger").toggleClass("is-active");
//add menu-active class to document body
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if ($("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
} else if (!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
html,
body {
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {
outline: 0;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.side-nav {
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side {
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block {
height: 40px;
}
header {
height: 80px;
background-color: #fff;
}
.brand {
display: inline-block;
}
.img-menu img {
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden {
position: absolute;
right: -300px;
}
#pushed {
position: relative;
}
#main {
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hello-text {
text-align: right;
color: #fff;
font-size: 22px;
}
/*add padding-right when menu is active*/
body.menu-active {
padding-right: 300px;
}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<a href="#">
<li class="block">Home</li>
</a>
<a href="#">
<li class="block">Profile</li>
</a>
<a href="#">
<li class="block">Blogs</li>
</a>
<a href="#">
<li class="block">Following</li>
</a>
<a href="#">
<li class="block">Settings</li>
</a>
<a href="#">
<li class="block">Logout</li>
</a>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
Working codepen https://codepen.io/azs06/pen/KQqqee

Add
margin-left: 300px;
to
.side-nav-ul
It worked for me in your codepen. Margin will push everything out of the way.

jQuery window .scroll dysfunction

I'm including the whole code here, it's the bones of a parallax website (all css) with a scrolling menu (jQuery) that displays the current position based on div ID.
The parallax CSS and menu jQuery work perfectly fine when separated, but there's a dysfunction when combined.
I narrowed it down to the window.scroll by logging it in the console and seeing that any time the mouse pointer is hovering over the main content frame (.parallax) while scrolling, nothing is logged. Is there some way to make sure the window's attributes and scroll position are logged regardless of what's in the body section?
jQuery(document).ready(function() {
console.log('got here');
jQuery(window).scroll(function() {
console.log('Log this');
});
});
$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top;
$(window).stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function() {
var fromTop = $(this).scrollTop();
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
I've changed my JS .scroll commands to focus on the .parallax div since that's really what should be measured, and it logs just fine now. BUT clicking on the items in the side menu still scrolls to positions as if it has a 30% view of the whole thing.
So I think the issue now is particularly with this line:
offsetTop = href === "#" ? 0 : $(href).offset().top;
The scrollTop and offsetTop results seem to be off. I'm trying to figure it out but I'm very slow. Any help would be appreciated.

So, you need to listen to .parallax scrolling right?
And you didn't tried this ?
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
console.log('Log this Parallax');
});
In your script, I got rid of the multiple ready wrappers.
$(document).ready(function() { is the same as $(function() {
One is a short hand of the other.
Multiple subsequent wrapper like this are useless... And nested ones too.
I also changed this (And this is what fixes your side menu offset on scroll back up) :
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
// ...
I also fixed the side menu links click handler like this:
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
There is still a small glitch on the appearance of the menus (top and side)...
That is because you use opacity instead of display to control show/hide.
That also is the source of the white band at the bottom of the page.
I left some work for you ;)
See it on CodePen and on the below snippet (but click the "Full page" link).
$(document).ready(function() {
console.log('got here');
$(window).scroll(function() {
//console.log('Log this');
});
$(".parallax").scroll(function() { // Added, just to console.log the scroll events.
//console.log('Log this Parallax');
});
//});
//$(document).ready(function() {
var debugInput = document.querySelector("input");
function updateDebugState() {
document.body.classList.toggle('debug-on', debugInput.checked);
}
debugInput.addEventListener("click", updateDebugState);
updateDebugState();
var lastId,
sideMenu = $(".ssb00"),
menuItems = sideMenu.find("a"),
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function(e) {
var href = $(this).attr("href"); // changed the coma to a semi-colon.
var offsetTop = href.offset().top; // Added var and removed the useless ternary operator: href === "#" ? 0 : $(href).offset().top;
$(".parallax").stop().animate({ // Changed $(window") to $(".parallax")
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(".parallax").scroll(function() { // Changed $(window) to $(".parallax")
var fromTop = $(window).scrollTop(); // Changed $(this) to $(window)
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
//$(function() {
var scroll = 0;
$(window).scroll(function(event) {
var moved = $(this).scrollTop();
var headerSize = 20
if (moved > headerSize) {
$('.ssb00').css({
'opacity': '1',
'right': '10px'
})
$('.ssb01').css({
'opacity': '0',
})
}
if (moved === 0) {
$('.ssb00').css({
'opacity': '0',
'right': '-40px'
})
$('.ssb01').css({
'opacity': '1',
})
}
if (moved > headerSize) {}
headerSize = moved;
});
//});
});
#charset "UTF-8";
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.ssb00 {
z-index: 100;
position: absolute;
width: 100px;
height: 100%;
top: 100px;
opacity: 0;
}
#menLogo {
z-index: 110;
position: fixed;
top: 0;
left: 8px;
height: 100px;
width: 100px;
background-image: url(img/Logo-300x244.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.ssb00_inWrap {
height: 200px;
position: relative;
top: calc(50vh - 150px);
}
.m00 {
height: 33px;
}
.m00 div {
position: absolute;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.m01 {
text-align: left;
right: 0;
width: 16px;
}
.m01:before {
content: '•';
}
.m02 {
left: 200px;
width: calc(100% - 26px);
opacity: 0;
text-align: right;
}
.ssb00_inWrap:hover .m02 {
left: 0px;
opacity: 1;
}
.ssb00 a {
color: #fff;
}
.ssb00 a:hover {
color: #6ccef5;
}
.active .m02 {
left: 0px;
opacity: 1;
}
.active a {
color: #1b75ba;
}
.ssb01 {
z-index: 100;
background: rgba(255, 255, 255, .9);
border-bottom: 1px solid #f0f0f0;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.ssb01 .nav {
font-weight: bold;
width: 560px;
height: 30px;
position: absolute;
right: 0;
bottom: 10px;
text-align: left;
}
.ssb01 a {
color: #1b75ba;
text-decoration: none;
margin: 0px 15px;
}
.ssb01 a:hover {
color: #6ccef5;
}
.ssb01 a:active {
color: #fff;
}
.ssb01__info {
position: absolute;
height: 45px;
padding: 14px 20px;
left: 110px;
top: 15px;
color: #666;
opacity: 1;
}
.trans {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
.debug {
position: fixed;
top: 0;
left: .5em;
z-index: 999;
background: rgba(0, 0, 0, .85);
color: #fff;
padding: .5em;
border-radius: 0 0 5px 5px;
}
.debug-on .parallax__group {
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
.debug-on .parallax__layer {
box-shadow: 0 0 0 2px #000;
opacity: 0.9;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax {
font-size: 200%;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#Xabout {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xabout .parallax__layer--back {
background: #6ba1ff;
}
#aboutGal {
z-index: 5;
/* slide over group 2 */
}
#aboutGal .parallax__layer--base {
background: #c4daff;
}
#Xconcept {
z-index: 3;
/* slide under groups 1 and 3 */
}
#Xconcept .parallax__layer--back {
background: #7ae570;
}
#conceptGal {
z-index: 4;
/* slide over group 2 and 4 */
}
#conceptGal .parallax__layer--base {
background: #adffa5;
}
#Xbroadcast {
z-index: 2;
/* slide under group 3 and 5 */
}
#Xbroadcast .parallax__layer--back {
background: #f0f760;
}
#broadcastGal {
z-index: 3;
/* slide over group 4 and 6 */
}
#broadcastGal .parallax__layer--base {
background: #fcffbc;
}
#Xdigital {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdigital .parallax__layer--back {
background: #42e2f4;
}
#digitalGal {
z-index: 3;
/* slide over group 7 */
}
#digitalGal .parallax__layer--base {
background: #aaf6ff;
}
#Xdesign {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xdesign .parallax__layer--back {
background: #e59172;
}
#designGal {
z-index: 3;
/* slide over group 7 */
}
#designGal .parallax__layer--base {
background: #ffe1d6;
}
#Xcontact {
z-index: 2;
/* slide under group 5 and 7 */
}
#Xcontact .parallax__layer--back {
background: rgb(245, 235, 100);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="debug">
<label><input type="checkbox"> Debug</label>
</div>
<div id="menLogo"></div>
<div class="ssb01 trans">
<div class="ssb01__info">
<span>bill o'day</span>
<br />
<span>creative director | art</span>
</div>
<div class="nav">
About
Concept
Broadcast
Digital
Design
Contact
</div>
</div>
<div class="ssb00 trans">
<div class="ssb00_inWrap">
<div class="m00 men-1 active">
<a href="#about">
<div class="m01 mm-1"></div>
<div class="m02 mm-1">About</div>
</a>
</div>
<div class="m00 men-2 active">
<a href="#concept">
<div class="m01 mm-2"></div>
<div class="m02 mm-2">Concept</div>
</a>
</div>
<div class="m00 men-3 active">
<a href="#broadcast">
<div class="m01 mm-3"></div>
<div class="m02 mm-3">Broadcast</div>
</a>
</div>
<div class="m00 men-4 active">
<a href="#digital">
<div class="m01 mm-4"></div>
<div class="m02 mm-4">Digital</div>
</a>
</div>
<div class="m00 men-5 active">
<a href="#design">
<div class="m01 mm-5"></div>
<div class="m02 mm-5">Design</div>
</a>
</div>
<div class="m00 men-6 active">
<a href="#contact">
<div class="m01 mm-6"></div>
<div class="m02 mm-6">Contact</div>
</a>
</div>
</div>
</div>
<div class="parallax">
<div id="Xabout" class="parallax__group">
<div id="about" class="parallax__layer parallax__layer--base">
<div class="title">hello</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">ABOUT BG</div>
</div>
</div>
<div id="aboutGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT GAL</div>
</div>
</div>
<div id="Xconcept" class="parallax__group">
<div id="concept" class="parallax__layer parallax__layer--base">
<div class="title">concepts</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">Concepts BG</div>
</div>
</div>
<div id="conceptGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONCEPTS GAL</div>
</div>
</div>
<div id="Xbroadcast" class="parallax__group">
<div id="broadcast" class="parallax__layer parallax__layer--base">
<div class="title">broadcast</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">BROADCAST BG</div>
</div>
</div>
<div id="broadcastGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BROADCAST GAL</div>
</div>
</div>
<div id="Xdigital" class="parallax__group">
<div id="digital" class="parallax__layer parallax__layer--base">
<div class="title">digital</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DIGITAL BG</div>
</div>
</div>
<div id="digitalGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DIGITAL GAL</div>
</div>
</div>
<div id="Xdesign" class="parallax__group">
<div id="design" class="parallax__layer parallax__layer--base">
<div class="title">design</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">DESIGN BG</div>
</div>
</div>
<div id="designGal" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">DESIGN GAL</div>
</div>
</div>
<div id="Xcontact" class="parallax__group">
<div id="contact" class="parallax__layer parallax__layer--base">
<div class="title">contact</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title">CONTACT BG</div>
</div>
</div>
</div>
</body>
</html>