Develop Reference

Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
#media (min-height: 30em) {
.section__content > * {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay),
transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content > * {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
box-sizing:border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y:auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start; height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff,
#969594,
#ffffff
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%, 30%, 40%, 50%, 70%, 80%, 90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%, 60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%, 85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%, 95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one" >
<div class="page">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

Two things,
Because btn-centering is not wrapped into any position: relative element, so it behaves like position: fixed, It was working for you previously because .outer didn't have overflow, overflow also affects positions
another thing is you have added overflow-y: auto to .outer so it has scroll now and body doesn't, but in jquery, you are trying to scroll the body.
I have added relative to .page element of first .section
I have added z-index: 1 to .nav because the relative element is affecting .nav
I have changed $('html,body').animate to $('.outer').animate
After doing all the above changes the page was scrolling to wrong sections, I found that Jquery will change the offset top when the page scroll is changed, So I also changed target.offset().top to target[0].offsetTop (target[0].offsetTop is supported in all browsers including IE)
html,
body {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
.relative {
position: relative;
}
#media (min-height: 30em) {
.section__content>* {
opacity: 0;
transform: translate3d(0, 4rem, 0);
transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
}
}
.is-visible .section__content>* {
opacity: 1;
transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
opacity: 0.75;
}
section {
display: block;
background: #CFF;
height: 100%;
width: 100%;
box-sizing: border-box;
scroll-snap-align: center;
}
.background1 {
background: url("IMG-7323.GIF") no-repeat center center;
background-size: cover;
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}
.outer {
overflow-y: auto;
scroll-snap-type: y mandatory;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
}
#one {
background: #111816;
color: #fff;
}
/* Title section 1 */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(150, 167, 204);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
h1 {
position: relative;
font-family: TaylorGothic;
font-size: calc(20px + 5vw);
font-weight: 700;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 0.15em #1da9cc;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s infinite linear forwards;
}
#font-face {
font-family: TaylorGothic;
src: url(TaylorGothic.woff2);
}
#keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
#keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
#keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
/* for the heading and the button alignment*/
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* section one end */
#two {
background: #123037;
color: #fff;
font-size: 30px;
}
#three {
background: #74BE98;
font-size: 30px;
}
#four {
background: #BED28D;
font-size: 30px;
}
#five {
background: #95211D;
color: #fff;
font-size: 30px;
}
nav {
position: fixed;
z-index: 1;
}
nav a {
display: block;
font-size: 12px;
color: #FFF;
text-align: center;
background: #000;
padding: 10px;
margin: 3px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('.outer').animate({
scrollTop: target[0].offsetTop
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
one
two
three
four
five
</nav>
<div class="outer">
<section id="one">
<div class="page relative">
<div class="background1"></div>
<!-- Title -->
<div class="btn-centering">
<h1 data-text="black mirror"><span>Ghosted</span></h1>
<button class="glow-on-hover" onclick="location.href='products.html'" type="button">
View Products</button></div>
</div>
<!-- Socail media buttons -->
</section>
<section id="two">Page 2
<div class="page"></div>
</section>
<section id="three">Page 3
<div class="page"></div>
</section>
<section id="four">Page 4
<div class="page"></div>
</section>
<section id="five">Page 5
<div class="page"></div>
</section>
</div>
</body>
</html>

How make the input go from draging to pressing left and right

Hello I don't really understand javascript well because I only use python typically. and I'm doing this javascript project and I want to make it where the input is not dragging and instead it is left and right.
So like when you move the lock all your have to do is press the arrow keys. Any help would greatly be very very nice.
JS
// make dial draggable
Draggable.create(".dial", {
type:"rotation",
throwProps:true
});
// values 40 or above will be set to 0
const combo = [20, 5, 30],
findCombo = function(comboArr){
let dial = $(".dial"),
dialTrans = dial.css("transform"),
ticks = 40,
tickAngle = 360 / ticks,
numOffset = 0.5, // how far red arrow can be from number
// break down matrix value of dial transform and get angle
matrixVal = dialTrans.split('(')[1].split(')')[0].split(','),
cos1 = matrixVal[0],
sin = matrixVal[1],
negSin = matrixVal[2],
cos2 = matrixVal[3],
angle = Math.round(Math.atan2(sin, cos1) * (180 / Math.PI)) * -1;
// convert negative angles to positive
if (angle < 0) {
angle += 360;
}
// check numbers found, stop loop if at first number not found
for (let i = 0; i < comboArr.length; ++i) {
if (!$(".num" + (i + 1)).hasClass("found")) {
if (angle > (comboArr[i] - numOffset) * tickAngle &&
angle < (comboArr[i] + numOffset) * tickAngle) {
// make numbers green when found
$(".num" + (i + 1)).addClass("found");
// on unlock
if (i == comboArr.length - 1) {
$(".shackle").addClass("unlocked");
$(".top").addClass("pivot1");
$(".inner").addClass("pivot2");
$(".left").addClass("moveRight");
$(".dentL, .dentR").addClass("moveLeft");
// then lock again
setTimeout(function() {
$(".shackle").removeClass("unlocked");
$(".top").removeClass("pivot1");
$(".inner").removeClass("pivot2");
$(".left").removeClass("moveRight");
$(".dentL, .dentR").removeClass("moveLeft");
$("body").attr("style","background: black;");
$(".sitelocker").attr("style","display:none;");
$(".mainsitebody").removeAttr("style");
for (let j = 0; j < combo.length; ++j) {
$(".num" + (j + 1)).removeClass("found");
}
}, 2400);
}
}
break;
}
}
};
// dial interaction (mouse)
$(".dial").on("click",function(){
findCombo(combo);
});
// dial interaction (touch)
$(".dial").on("touchend",function(){
findCombo(combo);
});
CSS
.sitelocker {
counter-reset: inc -5;
font-family: Open Sans, sans-serif;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
margin-bottom: 18px;
position: relative;
height: 270px;
width: 180px;
}
.lock, .dial {
border-radius: 50%;
}
.arrow, .dial {
margin: auto;
}
.shackle, .dial, .tick {
position: absolute;
}
.lock {
background: #aaa;
position: absolute;
bottom: 0;
height: 180px;
width: 180px;
}
.shackle {
bottom: 108px;
right: 22.5px;
width: 135px;
height: 168.75px;
will-change: transform;
z-index: -1;
}
.shackle div {
background: #999999;
position: absolute;
will-change: transform;
}
.shackle .top {
border-radius: 135px 135px 0 0;
height: 67.5px;
width: 135px;
transform-origin: 100% 0;
}
.shackle .inner {
background: #fff;
border-radius: 50%;
top: 33.75px;
left: 33.75px;
height: 67.5px;
width: 67.5px;
}
.shackle .left, .shackle .right {
top: 66.5px;
width: 33.75px;
}
.shackle .left {
border-radius: 0 0 6.75px 6.75px;
height: 94.5px;
overflow: hidden;
position: relative;
}
.shackle .left .dentL, .shackle .left .dentR {
position: absolute;
bottom: 16.875px;
z-index: 2;
}
.shackle .left .dentL {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-left: 15px solid #fff;
left: -30px;
}
.shackle .left .dentR {
border-top: 15px solid transparent;
border-bottom: 5px solid transparent;
border-right: 15px solid #fff;
right: 0;
}
.shackle .right {
right: 0;
height: 135px;
}
.arrow {
border: 7.5px solid transparent;
border-color: #a00 transparent transparent transparent;
margin-top: 11.25px;
margin-bottom: 3px;
transform: translateY(7.5px);
height: 0;
width: 0;
}
.dial {
background: #333 radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 30px, #1a1a1a 30px, #1a1a1a 32.25px, rgba(0, 0, 0, 0) 32.25px, rgba(0, 0, 0, 0));
font-family: Helvetica, sans-serif;
left: 0;
right: 0;
bottom: 7.2px;
position: absolute;
height: 144px;
width: 144px;
transform: rotate(0deg);
will-change: transform;
z-index: 1;
}
.tick {
background: #fff;
color: #fff;
font-size: 15px;
top: 72px;
left: 70.5px;
width: 3px;
height: 9px;
transform-origin: 50% -63px;
}
.tick::before {
display: block;
margin: -18px -18px 0 -18px;
text-align: center;
transform: rotate(180deg);
}
.tick:nth-of-type(1) {
transform: translateY(63px) rotate(180deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(180deg);
}
.tick:nth-of-type(1)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(2) {
transform: translateY(63px) rotate(189deg);
}
.tick:nth-of-type(3) {
transform: translateY(63px) rotate(198deg);
}
.tick:nth-of-type(4) {
transform: translateY(63px) rotate(207deg);
}
.tick:nth-of-type(5) {
transform: translateY(63px) rotate(216deg);
}
.tick:nth-of-type(6) {
transform: translateY(63px) rotate(225deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(225deg);
}
.tick:nth-of-type(6)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(7) {
transform: translateY(63px) rotate(234deg);
}
.tick:nth-of-type(8) {
transform: translateY(63px) rotate(243deg);
}
.tick:nth-of-type(9) {
transform: translateY(63px) rotate(252deg);
}
.tick:nth-of-type(10) {
transform: translateY(63px) rotate(261deg);
}
.tick:nth-of-type(11) {
transform: translateY(63px) rotate(270deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(270deg);
}
.tick:nth-of-type(11)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(12) {
transform: translateY(63px) rotate(279deg);
}
.tick:nth-of-type(13) {
transform: translateY(63px) rotate(288deg);
}
.tick:nth-of-type(14) {
transform: translateY(63px) rotate(297deg);
}
.tick:nth-of-type(15) {
transform: translateY(63px) rotate(306deg);
}
.tick:nth-of-type(16) {
transform: translateY(63px) rotate(315deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(315deg);
}
.tick:nth-of-type(16)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(17) {
transform: translateY(63px) rotate(324deg);
}
.tick:nth-of-type(18) {
transform: translateY(63px) rotate(333deg);
}
.tick:nth-of-type(19) {
transform: translateY(63px) rotate(342deg);
}
.tick:nth-of-type(20) {
transform: translateY(63px) rotate(351deg);
}
.tick:nth-of-type(21) {
transform: translateY(63px) rotate(360deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(360deg);
}
.tick:nth-of-type(21)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(22) {
transform: translateY(63px) rotate(369deg);
}
.tick:nth-of-type(23) {
transform: translateY(63px) rotate(378deg);
}
.tick:nth-of-type(24) {
transform: translateY(63px) rotate(387deg);
}
.tick:nth-of-type(25) {
transform: translateY(63px) rotate(396deg);
}
.tick:nth-of-type(26) {
transform: translateY(63px) rotate(405deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(405deg);
}
.tick:nth-of-type(26)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(27) {
transform: translateY(63px) rotate(414deg);
}
.tick:nth-of-type(28) {
transform: translateY(63px) rotate(423deg);
}
.tick:nth-of-type(29) {
transform: translateY(63px) rotate(432deg);
}
.tick:nth-of-type(30) {
transform: translateY(63px) rotate(441deg);
}
.tick:nth-of-type(31) {
transform: translateY(63px) rotate(450deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(450deg);
}
.tick:nth-of-type(31)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(32) {
transform: translateY(63px) rotate(459deg);
}
.tick:nth-of-type(33) {
transform: translateY(63px) rotate(468deg);
}
.tick:nth-of-type(34) {
transform: translateY(63px) rotate(477deg);
}
.tick:nth-of-type(35) {
transform: translateY(63px) rotate(486deg);
}
.tick:nth-of-type(36) {
transform: translateY(63px) rotate(495deg);
height: 18px;
transform-origin: 50% -54px;
transform: translateY(54px) rotate(495deg);
}
.tick:nth-of-type(36)::before {
counter-increment: inc 5;
content: counter(inc);
}
.tick:nth-of-type(37) {
transform: translateY(63px) rotate(504deg);
}
.tick:nth-of-type(38) {
transform: translateY(63px) rotate(513deg);
}
.tick:nth-of-type(39) {
transform: translateY(63px) rotate(522deg);
}
.tick:nth-of-type(40) {
transform: translateY(63px) rotate(531deg);
}
.combo {
font-size: 22.5px;
text-align: center;
display: none;
}
.combo span {
background: #ccc;
display: inline-block;
line-height: 30px;
padding: 7.5px;
width: 30px;
height: 30px;
vertical-align: middle;
}
.combo span.found {
background: #ccc;
color: #fff;
}
/* Animation classes */
.unlocked {
animation: moveUp 0.2s linear forwards, moveUp 0.2s 2s linear reverse forwards;
}
.moveLeft {
animation: moveLeft 0.5s 0.4s linear forwards, moveLeft 0.5s 1.2s linear reverse forwards;
}
.moveRight {
animation: moveRight 0.5s 0.4s linear forwards, moveRight 0.5s 1.2s linear reverse forwards;
}
.pivot1 {
animation: pivot1 0.5s 0.4s linear forwards, pivot1 0.5s 1.2s linear reverse forwards;
}
.pivot2 {
animation: pivot2-1 0.25s 0.4s cubic-bezier(0.6, 0.3, 0.45, 1) forwards, pivot2-2 0.25s 0.65s cubic-bezier(0.2, 0, 0.63, 0.5) forwards, pivot2-2 0.25s 1.3s cubic-bezier(0.2, 0, 0.63, 0.5) reverse forwards, pivot2-1 0.25s 1.45s cubic-bezier(0.6, 0.3, 0.45, 1) reverse forwards;
}
#keyFrames moveUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-63px);
}
}
#keyframes moveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(30px);
}
}
#keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(202.5px);
}
}
#keyframes pivot1 {
from {
transform: scale(1, 1);
right: 0;
}
50% {
transform: scale(0.25, 1) rotateY(0);
right: 0;
}
50.01% {
transform: scale(0.25, 1) rotateY(180deg);
right: 33.75px;
}
to {
transform: scale(1, 1) rotateY(180deg);
right: 33.75px;
}
}
#keyframes pivot2-1 {
from {
transform: scale(1, 1);
}
to {
transform: scale(0, 1);
}
}
#keyframes pivot2-2 {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
:root{
--text-color: #003cff;
--streak-color: #ff0000;
--font-family: "Gidugu";
}
h1, p, span {
color: transparent;
font-weight: 400;
font-size: 6rem;
}
h1 {
display: block;
height: 50vh;
background: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p, span {
display: inline-block;
}
p {
padding-left: 1rem;
font-size: 6rem;
text-shadow: 0 0 221px transparent;
-webkit-animation: showText 1s 1.5s 1 forwards ease-out;
animation: showText 1s 1.5s 1 forwards ease-out;
position: relative;
font-family: var(--fontstyle), cursive;
}
p:after {
content: "";
width: 30px;
background: var(--text-color);
height: 30px;
position: absolute;
top: 0px;
left: 200px;
border-radius: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
box-shadow: 0 0 0px 103px var(--text-color);
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: scaleBounce .3s 2s 1 linear forwards;
animation: scaleBounce .3s 2s 1 linear forwards;
}
span {
text-shadow: -48px -203px 150px var(--text-color), 132px -203px 150px var(--text-color);
-webkit-animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
animation: enterFromTop 1s ease-in 1 forwards, moveLetters .6s 2s alternate infinite ease-out;
font-family: var(--fontstyle), cursive;
}
span:first-child {
-webkit-animation-delay: -.3s;
animation-delay: -.3s;
}
span:nth-child(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
span:nth-child(3) {
-webkit-animation-delay: .7s;
animation-delay: .7s;
}
h1:after {
content: "";
display: block;
width: 200px;
height: 4px;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: 60px;
border-radius: 100%;
background: var(--streak-color);
box-shadow: 32px 5px 0 var(--streak-color);
-webkit-animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
animation: moveShadow 1s ease-in-out infinite alternate, moveElement 1s 2.5s ease-in infinite;
opacity: 0;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
#-webkit-keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#keyframes scaleBounce {
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.3;
background: transparent;
box-shadow: 0 0 20px 103px transparent;
}
}
#-webkit-keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes moveLetters {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#keyframes moveElement {
30%, 50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
-webkit-transform: translateX(690px);
transform: translateX(690px);
opacity: 0;
}
}
#-webkit-keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#keyframes moveShadow {
100% {
box-shadow: -32px 5px 0 var(--streak-color);
}
}
#-webkit-keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#keyframes enterFromTop {
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 1px var(--text-color);
}
}
#-webkit-keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
#keyframes showText {
80% {
text-shadow: 0 0 1px var(--text-color);
}
100% {
text-shadow: 0 0 1px var(--text-color), 0 0 20px var(--text-color);
}
}
HTML
<html >
<head>
<meta charset="UTF-8">
<title>Combination Lock</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://beam.pro/_latest/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" href="css/sitelocker.css">
<link rel="stylesheet" href="css/mainsite.css">
</head>
<body>
<div class="sitelocker">
<div class="container">
<div class="lock">
<div class="shackle">
<div class="top">
<div class="inner"></div>
</div>
<div class="left">
<div class="dentL"></div>
<div class="dentR"></div>
</div>
<div class="right"></div>
</div>
<div class="arrow"></div>
</div>
<div class="dial">
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</div>
</div>
<div class="combo"><span class="num1"></span> <span class="num2"></span> <span class="num3"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/utils/Draggable.min.js'></script>
<script src="js/sitelocker.js"></script>
</div>
<div class="mainsitebody" style="display:none;">
<h1>
<span>MSFT</span><span>.</span>
<p>online</p>
</h1>
</div>
</body>
</html>

DIV resizes on click but goes behind another DIV [vanilla JS]

I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>

Responsive menu in JavaScript

I have an issue with js. I want to make an responsive menu. I mean when I am on start page the start page is on first place on the list. If I am on contact page the contact is first in the list. var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; <div class="name_container"><p class="pn">Start</p><p class="more">READ MORE</p></div> The menu is a circle with icons that are moving on it. First element in list is on bottom of the circle. On conclusion I need change the list dinamicly in js script depends on subpage i am on. I know i can create several js files and it will work, but i wonna try it by js or HTML or u have some ideas.
Thanks from any help
var element = document.getElementById('mobile_control');
var hammertime = new Hammer(element);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on('swipeleft', function(ev) {
cmove("prev");
});
hammertime.on('swiperight', function(ev) {
cmove("next");
});
$(".action").on("click", function(){
cmove($(this).attr('id'));
});
$('.title').each(function(){
$(this).html("Earth".replace("<span class='letter'>$&</span>"));
});
var angle = 0;
var planet_id = 0;
function cmove(dir){
var n_planet = 8, next_id;
var prev, next;
var top = $("#pl"+ planet_id);
var orbit = $(".planet_container");
top.removeClass("pt");
if(planet_id == 0){
prev = $("#pl"+ (n_planet-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}else{
prev = $("#pl"+ (planet_id-1));
next = $("#pl"+ (planet_id+1)%n_planet);
}
if(dir == "prev"){
next_id = (planet_id + 1) % n_planet;
angle -= 45;
next.addClass("pt");
planet_id++;
}else{
if(planet_id == 0){
next_id = 7;
planet_id = 7;
}else{
next_id = planet_id-1;
--planet_id;
}
angle += 45;
prev.addClass("pt");
}
$('.pn').each(function(){
$(this).html(planet[next_id].replace( "<span class='letter'>$&</span>"));
});
anime.timeline({})
.add({
targets: '.pn .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: function(el, i) {
return 500 + 30 * i;
}
});
orbit.css("transform", "rotateZ(" + angle + "deg)");
}
var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
let loocation_path = location.pathname.split('/');
var path = loocation_path[loocation_path.length - 1];
switch(path){
case 'index.html':
while(planet[0] != 'Start'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Start";
break;
case 'contact.html':
while(planet[0] != 'Contact'){
let head = planet.shift();
planet.push(head);
};
var nazwa = document.getElementById('show_pathname');
nazwa.innerHTML = "Contact";
break;
}
const planets = document.querySelectorAll('.moon');
var moon_id = 0;
function moon(direction){
var n_planet = 8, moon_next;
if(direction == "prev"){
moon_next = (moon_id + 1) % n_planet;
moon_id++;
} else {
if(moon_id == 0){
moon_next = 7;
moon_id = 7;
} else {
moon_next = moon_id - 1;
--moon_id;
}
};
planets.forEach( ( planet, i ) => {
if ( i === moon_next ) {
planet.style.visibility = 'visible';
} else {
planet.style.visibility = 'hidden';
}
} );
};
body {
color: #444444;
font-size: 1rem;
margin: 0;
padding: 0;
}
.t-site-header {
padding-top: 20px;
height: 30vh;
}
.full_container {
position: relative;
display: block;
width: 100vmin;
height: 100%;
margin: auto;
z-index: 100;
}
.full_container .bottom {
position: absolute;
transform: rotate(180deg);
top: 0;
width: 100%;
height: 28vh;
}
.full_container .bottom .nav {
width: 100%;
height: 40px;
padding-top: 15px;
display: block !important;
}
.full_container .bottom .nav span {
color: #999;
cursor: pointer;
}
.full_container .bottom .nav span i {
font-size: 40px;
font-weight: 200;
}
.full_container .bottom .nav span:nth-child(1) {
padding-left: 10vmin;
}
.full_container .bottom .nav span:nth-child(2) {
padding-right: 10vmin;
float: right;
}
.full_container .bottom .orbit {
position: absolute;
top: 5vh;
width: 100%;
height: 100vmin;
border-radius: 50%;
border: 3px solid #eee;
margin: auto;
left: 0;
right: 0;
}
.full_container .bottom .orbit .planet_container {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.7s ease-in;
}
.full_container .bottom .orbit .planet_container .planet {
position: absolute;
border-radius: 50%;
width: 5vmin;
height: 5vmin;
transition: transform 0.4s linear;
will-change: transform;
}
.full_container .bottom .orbit .planet_container .pt {
transition: transform 0.4s ease-in;
transform: scale(1.7);
will-change: transform;
-webkit-animation: spin 0.4s;
animation: spin 0.4s;
}
/* */
.full_container .bottom .orbit .planet_container .earth {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
top: -2.5vmin;
left: 0;
right: 0;
margin: auto;
/* transform: rotate(180deg)*/
}
.full_container .bottom .orbit .planet_container .earth .mars .jupiter .saturn .uranus .neptune .mercury .venus .moon span {
top: -1vmin;
left: -1vmin;
}
.full_container .bottom .orbit .planet_container .mars {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
top: 12vmin;
/* transform: rotate(-135deg)*/
}
.full_container .bottom .orbit .planet_container .jupiter {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(-90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .saturn {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 12vmin;
bottom: 12vmin;
/* transform: rotate(-45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .uranus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
right: 0;
left: 0;
margin: auto;
bottom: -2.5vmin;
/* transform: rotate(0deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .neptune {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
bottom: 12vmin;
/* transform: rotate(45deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .mercury {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: -2.5vmin;
bottom: 46.5vmin;
/* transform: rotate(90deg) scale(1.7);*/
}
.full_container .bottom .orbit .planet_container .venus {
background: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png) no-repeat center center / contain;
left: 12vmin;
top: 12vmin;
/* transform: rotate(135deg) scale(1.7);*/
}
.full_container .bottom .orbit .name_container {
position: absolute;
display: flex;
width: auto;
margin: auto;
left: 0;
right: 0;
top: 8vh;
text-align: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
transform: rotate(180deg);
}
.full_container .bottom .orbit .name_container .more {
width: 100%;
padding: 8px 0;
color: #bbb;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.full_container .bottom .orbit .name_container .more:hover {
color: #888;
transition: color 0.3s;
}
.full_container .bottom .orbit .name_container .pn {
font-size: 25px;
color: #666;
text-transform: uppercase;
padding-bottom: 4px;
letter-spacing: 4px;
padding-left: 8px;
border-bottom: 3px solid #bbb;
}
.full_container .bottom .orbit .name_container .pn .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
.moon {
width: 100%;
height: 100%;
-webkit-animation: planet_rotation 2s infinite linear;
animation: planet_rotation 2s infinite linear;
visibility: hidden;
}
.moon span {
width: 0.8vmin;
height: 0.8vmin;
background: black;
border-radius: 50%;
position: absolute;
}
#-webkit-keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes planet_rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#pl0{
transform: rotate(180deg);
}
#pl1{
transform: rotate(225deg);
}
#pl2{
transform: rotate(270deg);
}
#pl3{
transform: rotate(315deg);
}
#pl4{
transform: rotate(360deg);
}
#pl5{
transform: rotate(405deg);
}
#pl6{
transform: rotate(450deg);
}
#pl7{
transform: rotate(495deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<header class="t-site-header">
<div class="full_container" id="mobile_control">
<div class="bottom">
<div class="nav">
<span id="next" onclick="moon('next')" class="action"><i class="material-icons">keyboard_arrow_left</i></span>
<span id="prev" onclick="moon('prev')" class="action"><i class="material-icons">keyboard_arrow_right</i></span>
</div>
<div class="orbit">
<div class="planet_container">
<div class="planet pt earth" id="pl0">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mars" id="pl1">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet jupiter" id="pl2">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet saturn" id="pl3">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet uranus" id="pl4">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet neptune" id="pl5">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet mercury" id="pl6">
<div class="moon">
<span></span>
</div>
</div>
<div class="planet venus" id="pl7">
<div class="moon">
<span></span>
</div>
</div>
</div>
<div class="name_container">
<p class="pn" id="show_pathname"></p>
<p class="more">READ MORE</p>
</div>
</div>
</div>
</div>
</header>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script><script src="./js/script.js"></script>
</body>
</html>

How to achieve smoothe slide down effect in Navbar Menu

Objective - I wanted to achieve a slide down (for navbar) effect after some scrolling. I actually achieved what I wanted, but I am getting a problem.
Problem - When scrolling up to the top, the navbar is getting sticky with no effect and it is kind of takes the charm. Can anyone help me to fix this?
You can see my code here at Codepen.
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#header').addClass('sticky-header');
$('#header .mo-row').removeClass('sticky-border');
} else {
$('#header').removeClass('sticky-header');
$('#header .mo-row').addClass('sticky-border');
}
});
var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebarBox.classList.remove('active');
} else {
this.classList.add('active');
sidebarBox.classList.add('active');
}
});
// accordion js
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active2');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active2')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active2');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
html {
box-sizing: border-box;
}
body {
margin: 0;
height: 1000px;
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
.mo-container {
width: 100%;
max-width: 1250px;
margin: 0 auto;
z-index: 999;
position: relative;
}
.mo-row {
width: 95%;
margin: 0 auto;
}
.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
content: " ";
display: table;
}
.mo-grid:after,
.mo-row:after {
clear: both;
}
[class*='col-'] {
width: 100%;
float: left;
min-height: 1px;
}
.col {
margin: 10px;
}
#media screen and (min-width: 320px) {
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
#media screen and (min-width: 992px) {
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
.hello-bar {
height: 40px;
line-height: 39px;
background: #52ae56;
text-align: center;
color: #fff;
}
.hello-bar a {
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.hello-bar a span {
font-weight: bold;
}
.sticky-header {
background-color: #fff !important;
box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
height: 65px;
line-height: 65px;
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slidedown {
0% {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes slidedown {
0% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.sticky-border {
border-bottom: 1px solid #e8e8e8;
}
#header-sec {
position: relative;
z-index: 9999999;
height: 65px;
line-height: 65px;
/* Fold Out */
/* accordion css */
}
#header-sec #header {
background-color: transparent;
width: 100%;
height: 66px;
line-height: 64px;
position: absolute;
}
#header-sec #header .navbar-logo {
height: 65px;
line-height: 65px;
cursor: pointer;
}
#header-sec #header .navbar-logo img {
height: 75px;
margin-top: -4px;
margin-left: -17px;
}
#header-sec .nav ul {
background-color: transparent;
}
#header-sec .nav ul > li {
display: inline-block;
position: relative;
}
#header-sec .nav a {
display: block;
padding: 10px 18px 10px 15px;
font-size: 0.9em;
line-height: 1.2em;
color: #0d1739;
font-weight: 400;
}
#header-sec .nav a:hover {
text-decoration: none;
}
#header-sec .nav li ul {
background-color: #fff;
}
#header-sec .nav li ul li {
width: 200px;
display: block;
text-align: left;
}
#header-sec .nav li ul a {
border: none;
color: #333;
}
#header-sec .nav li ul a:hover {
background: #333;
color: #fff;
}
#header-sec .nav li ul {
position: absolute;
left: 0;
top: 52px;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
background: #fff;
padding: 10px 30px;
border-bottom: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
border-bottom: none;
}
#header-sec a {
color: #343838;
}
#header-sec #box {
position: fixed;
z-index: 4;
overflow: auto;
top: 0px;
right: -250px;
width: 250px;
opacity: 0;
padding: 20px 0px;
height: 100%;
background-color: #f6f6f6;
color: #343838;
-webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #box.active {
right: 0px;
opacity: 1;
}
#header-sec #items {
position: relative;
top: 8.7%;
line-height: normal;
}
#header-sec #items .item {
position: relative;
cursor: pointer;
font-size: 1em;
/* originally 2ems */
padding: 10px 20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
#header-sec #items .item:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec #btn {
position: absolute;
z-index: 5;
top: 22px;
right: 9px;
cursor: pointer;
-webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #btn div {
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: #1d1f20;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-sec #btn.active {
right: 9px;
}
#header-sec #btn.active div {
background-color: #343838;
}
#header-sec #btn.active #top {
-webkit-transform: translateY(10px) rotate(-135deg);
-ms-transform: translateY(10px) rotate(-135deg);
transform: translateY(10px) rotate(-135deg);
}
#header-sec #btn.active #middle {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#header-sec #btn.active #bottom {
-webkit-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
overflow: hidden;
line-height: normal;
}
#header-sec .accordion-section-title {
cursor: pointer;
width: 100%;
transition: all linear 0.15s;
-webkit-transition: all linear 0.15s;
-moz-transition: all linear 0.15s;
-ms-transition: all linear 0.15s;
-o-transition: all linear 0.15s;
position: relative;
display: block;
padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
padding: 10px 20px;
background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
display: none;
background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
display: block;
}
#header-sec #box, #header-sec #btn {
display: none;
}
#media screen and (max-width: 992px) {
#header-sec .navbar-menu {
display: none;
}
#header-sec #box, #header-sec #btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
<img src="img/notification.png" alt="" style="width: 17px;"></a>
</div>
</div>
</div>
</div>
<section id="header-sec">
<header id="header">
<div class="mo-container">
<div class="mo-row sticky-border">
<nav class="col-sm-6 col-md-4 col-lg-2">
<div class="navbar-logo">
<img src="img/logo-dark.png" alt="">
</div>
</nav>
<nav class="col-sm-6 col-md-8 col-lg-10 text-right">
<div class="navbar-menu nav">
<ul>
<li>
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</li>
<li>
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>Customer Stories</li>
<li>Help & Support</li>
<li>Developers Docs</li>
</ul>
</li>
<li>
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</li>
<li>Pricing</li>
<li>Login</li>
<li>Sign Up</li>
<li>
<a href="" style="padding-right: 0;">
<button class="button primary">Free Demo</button>
</a>
</li>
</ul>
</div>
<div id="box">
<div id="items">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
Product <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li>Flows</li>
<li>Web Push</li>
<li>Email Campaigns</li>
<li>In-app Nativ</li>
<li>User Intelligence</li>
<li>Engagement Platform</li>
<li>Smart Triggers</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
Customers <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-2" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
Company <i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div id="accordion-3" class="accordion-section-content">
<ul>
<li>About</li>
<li>Blog</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
<div class="item">Pricing</div>
<div class="item">Login</div>
<div class="item">Sign Up</div>
</div>
</div>
<div id="btn">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</nav>
</div>
</div>
</header>
</section>

So I changed your sticky header JS to add a class on scroll up and a class of show once 200px had been scrolled from the top.
JS
// Sticky Header
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 200) {
jQuery("#header").addClass("show");
} else {
jQuery("#header").removeClass("show");
}
});
var lastScrollTop = 0;
jQuery(window).scroll(function(event){
var st = jQuery(this).scrollTop();
if (st > lastScrollTop){
jQuery("#header").removeClass("up");
} else {
jQuery("#header").addClass("up");
}
lastScrollTop = st;
});
Then Added the CSS
#header-sec #header,
#header-sec #header.up{
position: absolute;
top: 0;
-webkit-transition: top 500ms ease-out ;
-moz-transition: top 500ms ease-out ;
-o-transition: top 500ms ease-out ;
transition: top 500ms ease-out ;
}
#header-sec #header.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#header-sec #header.up.show {
position: fixed !important;
top: 0;
-webkit-animation-name: slideup;
animation-name: slideup;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
}
#keyframes slideup {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-400px);
-ms-transform: translateY(-400px);
transform: translateY(-400px);
}
}
Hope you can use this