We Keep Coding

Why this javascript only works when in script tag and not in a .js file? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 days ago.
I googled on some nice image sliders and stumbled across this one. When I put the javascript in a script tag in the html it works just fine, but when I try to put it in a .js file linked to the html it stops working and I can't figure out why. When I look at the console output, it says it can't read the "addEventListener" at line 10. Thanks in beforehand :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #262626;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
border-radius: 1rem;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* footer */
#footer {
position: absolute;
top: 100vh;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
margin-top: 2vh;
width: 98%;
height: 96.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
background-color: rgba(160, 160, 160, 0.568);
backdrop-filter: blur(15px);
padding: 0 1rem 0 1rem;
border-radius: 2rem;
font-family: monospace;
position: fixed;
top: 102vh;
right: 50%;
translate: 50% 0;
height: fit-content;
width: 45vw;
display: flex;
justify-content: space-between;
}
#menu li {
display: inline;
font-size: 1.2rem;
}
#active {
background-color: #f2f2e4;
border-radius: 3rem;
}
.menu-links {
padding: 8px 35px 8px 35px;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
.slider{
position: relative;
background: #000116;
width: 800px;
min-height: 500px;
margin: 20px;
overflow: hidden;
border-radius: 10px;
}
.slider .slide{
position: absolute;
width: 100%;
height: 100%;
clip-path: circle(0% at 0 50%);
}
.slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 2s;
}
.slider .slide img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider .slide .info{
position: absolute;
color: #222;
background: rgba(255, 255, 255, 0.3);
width: 75%;
margin-top: 50px;
margin-left: 50px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 5px 25px rgb(1 1 1 / 5%);
}
.slider .slide .info h2{
font-size: 2em;
font-weight: 800;
}
.slider .slide .info p{
font-size: 1em;
font-weight: 400;
}
.navigation{
height: 500px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0;
transition: opacity 0.5s ease;
}
.slider:hover .navigation{
opacity: 1;
}
.prev-btn, .next-btn{
z-index: 999;
font-size: 2em;
color: #222;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
cursor: pointer;
}
.prev-btn{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.next-btn{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.navigation-visibility{
z-index: 999;
display: flex;
justify-content: center;
}
.navigation-visibility .slide-icon{
z-index: 999;
background: rgba(255, 255, 255, 0.5);
width: 20px;
height: 10px;
transform: translateY(-50px);
margin: 0 6px;
border-radius: 2px;
box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}
.navigation-visibility .slide-icon.active{
background: #4285F4;
}
#media (max-width: 900px){
.slider{
width: 100%;
}
.slider .slide .info{
position: relative;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
#media (max-width: 500px){
.slider .slide .info h2{
font-size: 1.8em;
line-height: 40px;
}
.slider .slide .info p{
font-size: 0.9em;
}
}
/*.mySlides {
display: none;
}
/* Slideshow container
.slideshow-container {
width: 100%;
height: 100%;
max-height: 100vh;
margin: auto;
}
/* The dots/bullets/indicators
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
}
}
/* Next & previous buttons
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Överdäckningen | Startsida</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
</head>
<!--
Göra så loggan försvinner när man scrollar ner och kommer tillbaka när man scrollar upp
navbar responsiv, desktop
mediaquery för ipad
bilder, text
göra så bildspelet passar in
anpassa alla bilder för skärmstorlek, picture element
(karta kanske?)
lägga rätt fonter på rubriker och text
-->
<body>
<main>
<div id="backdrop">
<div class="slider">
<div class="slide active">
<img src="imgs/1.jpg" alt="" />
<div class="info">
<h2>Winter Mountains</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/2.jpg" alt="" />
<div class="info">
<h2>Tropical Desert</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/3.jpg" alt="" />
<div class="info">
<h2>Steaming Volcanoes</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/4.jpg" alt="" />
<div class="info">
<h2>Mountain River</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="slide">
<img src="imgs/5.jpg" alt="" />
<div class="info">
<h2>Egypt Pyramids</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="navigation">
<i class="fas fa-chevron-left prev-btn"></i>
<i class="fas fa-chevron-right next-btn"></i>
</div>
<div class="navigation-visibility">
<div class="slide-icon active"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
</div>
</div>
<script type="text/javascript">
const slider = document.querySelector(".slider");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const slideIcons = document.querySelectorAll(".slide-icon");
const numberOfSlides = slides.length;
var slideNumber = 0;
//image slider next button
nextBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
});
//image slider previous button
prevBtn.addEventListener("click", () => {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber--;
if (slideNumber < 0) {
slideNumber = numberOfSlides - 1;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
});
//image slider autoplay
var playSlider;
var repeater = () => {
playSlider = setInterval(function () {
slides.forEach((slide) => {
slide.classList.remove("active");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
slideNumber++;
if (slideNumber > numberOfSlides - 1) {
slideNumber = 0;
}
slides[slideNumber].classList.add("active");
slideIcons[slideNumber].classList.add("active");
}, 4000);
};
repeater();
//stop the image slider autoplay on mouseover
slider.addEventListener("mouseover", () => {
clearInterval(playSlider);
});
//start the image slider autoplay again on mouseout
slider.addEventListener("mouseout", () => {
repeater();
});
</script>
<header id="wrapper">
<nav>
ÖVERDÄCKNINGEN
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li><a class="menu-links" id="active" href="#">Länk 1</a></li>
<li><a class="menu-links" href="html/link2.html">Länk 2</a></li>
<li><a class="menu-links" href="html/link3.html">Länk 3</a></li>
<li><a class="menu-links" href="html/link4.html">Länk 4</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro amet
dolores nisi delectus ad inventore laboriosam alias, architecto eos
sunt quod eum maiores provident aspernatur debitis ratione minus
quaerat cumque veniam. Delectus commodi odit molestiae excepturi.
Doloremque rem tempora quod est veritatis earum accusamus vel fugiat
numquam reprehenderit ad labore repudiandae recusandae neque
voluptatum a nulla dignissimos sapiente ut, officiis fugit porro.
Aliquid unde incidunt quisquam. Veniam sunt doloremque modi in
voluptates inventore. In corrupti hic eos, incidunt iusto dignissimos
praesentium ut adipisci possimus officiis nesciunt, eveniet asperiores
illum laudantium aliquid dicta temporibus aut maxime dolor fugit totam
animi velit repudiandae ea? Esse, quod repudiandae amet iusto
temporibus aperiam dolore aliquid, magni sunt eveniet deleniti at
suscipit quasi adipisci, quo officia accusantium repellat nostrum
nemo! Reiciendis repellat omnis facilis qui excepturi assumenda id
laborum vero voluptas, vitae aspernatur eius magnam voluptates iusto,
dolores a fugit tenetur quo nostrum ipsa sequi cumque? Velit voluptate
et at aut iste obcaecati nisi, vitae repellat placeat quasi iusto.
Rerum vero eos earum nobis in inventore quos aliquid id, assumenda
tempora? Modi repudiandae dolorem architecto ut animi doloribus,
tempore possimus nihil ipsum accusamus fugiat laboriosam culpa iure
eum mollitia ab? Quidem quas minus necessitatibus voluptate, rem vero
eligendi possimus totam voluptates laudantium atque illo provident
quasi! Laboriosam quo odio quia in! Commodi voluptatem facilis eos
neque non, magni fugiat numquam consectetur, ipsa dolores ut rerum,
sint sequi quos illo obcaecati omnis harum laudantium error inventore
praesentium. Commodi fugit nostrum asperiores vel ducimus
reprehenderit quis suscipit laborum et fugiat libero eius assumenda
esse nobis, iste, impedit ipsa repudiandae aut aspernatur placeat
inventore! Eligendi sit in obcaecati quia repudiandae explicabo
officia eveniet omnis earum. Quibusdam alias amet quas nobis ullam
vitae enim quod facilis quam maiores! Rem consequatur distinctio
laudantium harum labore, minus qui molestiae suscipit modi libero quia
pariatur maxime hic, voluptate totam numquam, illo beatae voluptatibus
atque ipsa assumenda. Ipsum laudantium, modi nam repellat similique
vitae asperiores corrupti accusamus voluptate maxime harum expedita,
ipsa fugiat obcaecati deserunt porro impedit blanditiis error
reprehenderit temporibus ex at, molestias eius magnam? Voluptatem,
repellat ratione distinctio sit odio assumenda non ad fugit eligendi
nemo eveniet enim porro asperiores, aliquam aliquid? Officia
reiciendis libero tempore cupiditate rem laboriosam odit aspernatur!
Perferendis, id odit. Laudantium, culpa. Iure placeat deserunt
consectetur! Cumque, asperiores itaque nobis laudantium fuga fugit,
nemo autem maiores quo et perferendis laborum illum quis suscipit
eveniet ullam modi. Soluta cum eaque, sequi eveniet deserunt quia odio
officia tenetur vero corrupti labore eum voluptatum quam cumque fuga
hic numquam! Ullam, a dolore omnis nemo beatae at possimus eum
officiis molestiae exercitationem temporibus ab blanditiis voluptatum
reiciendis mollitia maxime perspiciatis harum nostrum officia deleniti
delectus. Hic quos molestias rerum ducimus fugiat consectetur facilis
perspiciatis animi, incidunt error ut tenetur similique unde molestiae
labore perferendis sapiente totam mollitia! Qui, similique ad eos,
cumque laudantium sapiente dolores quas omnis nam fuga exercitationem
blanditiis quaerat aut animi at beatae explicabo nihil adipisci.
Voluptatum qui repudiandae provident ratione, tenetur illum fuga quas
sapiente laborum ipsa obcaecati aut quod perspiciatis, ullam, veniam
explicabo nulla quaerat incidunt quidem! Est odit corrupti quibusdam
doloribus! Vel excepturi voluptatum, nobis voluptatem error
consectetur placeat quibusdam architecto! Molestiae ipsum suscipit est
aperiam veniam nobis laboriosam porro alias, sit eos repellendus
labore, ratione unde ducimus, accusantium illum voluptatum. Tempore,
rem repellat, laboriosam velit aut aliquid ipsa quibusdam consectetur
soluta veniam architecto totam! Reiciendis aliquid vel voluptatem
tempore ea, unde officiis. Corrupti perspiciatis voluptates, suscipit
vero voluptatibus corporis commodi excepturi reprehenderit eos et
nulla voluptatem fuga porro maxime quam eius distinctio, at id aliquid
itaque consequuntur ut repudiandae. Officiis, qui eveniet animi
officia voluptate ipsum, fuga, nisi doloribus in obcaecati quia error
eaque ad cupiditate aliquam alias modi placeat mollitia quibusdam
illum quas aliquid sint? Eligendi, nostrum maiores quas iste
recusandae quae natus impedit consequatur id ipsam dignissimos sequi
excepturi, nobis ducimus dolorum tenetur repellendus praesentium in
dicta atque velit voluptatum quia. Placeat culpa aliquid ab natus
quaerat non quasi cupiditate reprehenderit soluta, unde repellendus
illum, praesentium distinctio blanditiis quod magnam laborum excepturi
iusto molestiae accusamus dolorem nihil. Voluptatum, molestias
debitis? Ipsum veritatis iure suscipit, saepe alias aliquam enim,
officiis deleniti soluta ratione tempora maxime ab beatae autem
accusamus nemo sit, porro dolore illum esse hic. Repudiandae expedita
iste, inventore, officia, ut voluptatibus unde ullam sint debitis enim
ipsa dolorum ducimus quos. Suscipit tenetur ratione sed iure! Tempora
maxime, et neque natus dolores aliquam hic magni commodi quod a vel
delectus quisquam aperiam cupiditate eaque aspernatur tempore atque
tenetur modi? Exercitationem repellat hic officiis atque aperiam
repellendus et eos quisquam ratione, quidem enim quae sint facere
laudantium amet iure? Dolorum esse autem corrupti explicabo laborum
eum at distinctio dicta aut molestias sunt, totam ab eligendi
possimus. Ipsa, dolorem numquam sint doloribus reprehenderit
laboriosam aperiam alias, culpa recusandae minima assumenda tempore
placeat sunt nesciunt, dolores quidem repudiandae dolor. Ipsa illo, ex
repellat iusto ea fugit sapiente hic, adipisci nam, soluta numquam
error eum neque quos commodi quae a architecto voluptas perspiciatis?
Velit impedit libero ut sit minima exercitationem delectus nobis
quibusdam ab excepturi, soluta maxime ipsum, maiores laudantium iste?
Atque corrupti cupiditate non deserunt alias deleniti delectus numquam
repellendus soluta obcaecati fugit veniam, porro asperiores nesciunt
sed hic esse iusto ipsam provident est praesentium nam eveniet neque
at. Eaque aliquid ipsam vitae. Impedit quas est asperiores sunt
recusandae, iure beatae accusantium quidem quos iste sint sed
architecto eum perferendis dolorum tempora nihil odio error.
</p>
</div>
<footer id="footer">
<p id="footer-text">Lorem ipsum dolor sit amet consectetur.</p>
</footer>
</main>
</body>
</html>

Yeah, What #evolutionxbox said. If you have the JS included in the header, or any place above where you have defined nextBtn in the HTML or any of the other elements you plan on using, then those elements are going to be null when the script executes.
You should make sure you script runs after the document is loaded by putting the above into a function and running it by attaching said function to the window onload event.
The JS include should look something like the following
function yourScript(){
/* Your script goes here */
}
window.addEventListener("load",yourScript);
You can also use
window.addEventListener("DOMContentLoaded",yourscript);
If you want to run the script after the DOM has been parsed, but before the images and other third party content has been loaded. This is probably fine for your script.

Reverse sticky navbar not appearing when position switches from fixed to static?

Situation
I have a reverse sticky navbar where the navbar is in position:fixed at the top and when the top of a specific div container touches the bottom of the navbar, the position:static with jquery.
Problem
When the navbar becomes position:static the navbar disappears (please view code in full screen to see problem). I want the navbar to stick to the top of the div container while scrolling to the bottom of the page which means it scroll out of frame when position is not fixed. like this http://jsfiddle.net/vx8uc2rm/.
var fixmeTop = $('.texttop').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop()+210;
if (currentScroll >= fixmeTop) {
$('.header-container').css({
position: 'relative'
});
} else {
$('.header-container').css({
position: 'fixed',
top: 0,
left: 0
});
}
});
body {
background-color: #fbfaf8;
overscroll-behavior: none;
overflow: scroll;
}
.myheroimage {
background-color:palevioletred;
min-height: 1400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
.header-container {
width: 100%;
position: fixed;
z-index: 99;
background-color: #fbfaf8;
height: 180px;
}
header {
display: flex;
justify-content:space-between;
padding: 30px 120px;
align-items: center;
margin-bottom: 80px;
}
a {
color: white;
text-decoration: none;
}
a.mybutton {
color: #191919;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 3px;
}
a.mybutton:hover {
color: #758086;
}
a.mybutton1 {
color: #35BDAF;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 3px;
}
.mybutton{
margin-left: 44px;
}
.texttop {
text-align: center;
font-family: 'Roboto', sans-serif;
letter-spacing: 4px;
font-size: 2rem;
margin: 0 0 68px
}
.container-projects {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content:flex-start;
margin: 0 120px 120px;
}
.footer-container {
background-color:#1E2224;
color: white;
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
font-weight: 300;
font-size: 1rem;
height: 150px;
padding: 50px 120px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="css-reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="hiddenoverflow"></div>
<div class="myheroimage">
<div class="header-container">
<header>
<div class="logo"></div>
<nav>
Title
Title2
Title3
</nav>
</header>
</div>
</div>
<div class="texttop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="container-projects">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quam tempora quibusdam in atque! Nobis explicabo, at facere, sint sunt voluptas ad nesciunt deleniti dolorem aliquid dolor repellendus hic labore?
Facere ex debitis dolores minus nihil iusto veniam voluptatum nesciunt, maxime nobis esse architecto dignissimos ipsa? Architecto deleniti saepe vel maiores, quia alias maxime, dicta ea aliquid hic quis deserunt.
Earum eum hic nam corporis necessitatibus unde provident, numquam omnis doloremque ad ducimus velit neque, repellat quisquam distinctio. Rem velit veniam reiciendis accusantium nam debitis tempora perspiciatis iste accusamus error!
Suscipit at illo voluptatum eveniet error. Perferendis cupiditate atque rem architecto voluptates excepturi saepe assumenda earum delectus similique voluptatem sint voluptatibus ea, aperiam maiores perspiciatis error doloribus est blanditiis sit!
Beatae recusandae delectus commodi omnis obcaecati quia atque, architecto aliquid sapiente vitae vero quasi veniam ipsam totam earum doloremque assumenda? Ut, ad. Tempora, necessitatibus voluptates qui sit natus eum assumenda.
Eius molestias totam non optio? Totam laudantium odio tempore consequuntur laboriosam tempora, voluptas eligendi quae officiis ad necessitatibus optio quas excepturi voluptatibus doloremque provident numquam molestiae dolorum, exercitationem aliquid reprehenderit?
Alias laboriosam, aperiam quas provident quibusdam in reprehenderit voluptatem officiis laborum. Deleniti, beatae molestiae. Minima cupiditate consequuntur, repudiandae quasi aliquam, autem, delectus suscipit ex similique vel doloremque cumque odio rem?
Praesentium vel, voluptatem nam soluta reiciendis maiores quia hic pariatur eaque incidunt perspiciatis voluptatum debitis alias unde iure, accusamus dolorem dolor consectetur eos? Unde autem suscipit nihil corporis, sequi quis!
Tempore suscipit iusto libero, illo doloremque cumque odio reprehenderit cupiditate quis, dignissimos porro officiis est error a enim optio accusantium? Maxime laborum totam ut quod iure iste. Aspernatur, minus porro!
Natus inventore dolore, eveniet laudantium magni iste impedit? Voluptatibus inventore eius, illum voluptatem magnam non reprehenderit perspiciatis vitae qui, est error dolorem voluptas incidunt quia ipsa exercitationem expedita tempore autem?</p>
</div>
<div class="footer-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="stickyscroll.js"></script>
</body>
</html>

Please check this fiddle:http://jsfiddle.net/dularnikode/742azj0x/5/ if it can solve your first problem.
You can use position "sticky" to solve your first problem.
body {
height: 3000px;
}
.content {
background: blue;
height: 500px;
}
.fixme {
background: green;
color: white;
text-align: center;
width: 100%;
position:sticky;
top:0px;
}
.writehere {
background: red;
width: 100%;
}
<div class="fixme">Scroll here</div>
<div class="content"></div>
<div class="writehere">hi</div>

Figured it out! I just used scrollToFixed(); jquery plugin in my js file instead by bigsotteddog https://github.com/bigspotteddog/ScrollToFixed#demos
$(document).ready(function() {
$('.header-container').scrollToFixed( { marginTop: 10, limit: 400 } );
The marginTop fixes the navbar/header to whichever height set, 0 is the top of the page and the limit is the scroll position/point in which it triggers the navbar to stop sticking.
This specific demo provided by the github page helped me understand how to use the plugin, http://jsfiddle.net/y3qV5/435/.
here's a link to a similar question I had that was answered on stackoverflow too, "Reverse" sticky header.

Element loses its "rotateZ" value when "translateX" value is assigned - CSS

I have this test page which I'm working on.
As you can see from the snippet, I have the "Share" bar rotated on the Z axis with transform: rotateZ(-90deg); and left-positioned with transform-origin:0 0;. (Note: this is the first time I use transform-origin and maybe I did something wrong(?)).
What I want to do:
When the page is scrolled up the "Share" bar should move to the left, outside the viewport, maintaining the transform: rotateZ(-90deg); property and when the page is scrolled down the "Share" bar should reappear in the same position. So it should stay shifted vertically when the transitions occur.
The problem:
When the page is scrolled up and the "Share" bar moves out of the viewport, the transform: translateX(-120px); property takes action as if the transform: rotateZ(-90deg); was never declared.
How can I make it stay vertically "fixed" during all the transitions, based on scrolling events?
ALSO: Why there is no overflow-x when the "Share" bar goes out the viewport?
Edit: I tried moving it with left and right, but in this case there's no transition time.
The snippet (Note: Go to the bottom of the css file for the .share element and its styling)
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');
burger.addEventListener('click', () => {
nav.classList.toggle('active');
burger.classList.toggle('hide');
xicon.classList.toggle('active');
});
const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
nav.classList.toggle('active');
xicon.classList.toggle('active');
burger.classList.toggle('hide');
})
const header = document.querySelector('header');
let prev = window.pageYOffset;
window.addEventListener('scroll', function(){
let current = window.pageYOffset;
if(prev < current){
header.classList.add('hide');
}
else {
header.classList.remove('hide');
}
prev = current;
})
const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;
window.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset;
if(prevScroll < currentScroll) {
shareThing.classList.add('hide');
icons.classList.add('hide');
}
else {
shareThing.classList.remove('hide');
icons.classList.remove('hide');
}
prevScroll = currentScroll;
})
let share = document.querySelector('.share');
let icons = document.querySelector('.side');
share.addEventListener('click', () => {
icons.classList.toggle('active');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logoandicon {
display: flex;
justify-content: space-between;
align-items: center;
background: powderblue;
padding: .7em 0;
}
.logo {
margin-left: .5em;
}
.burger {
margin-right: 1em;
z-index: 2;
}
.burger.hide {
display: none;
}
nav ul li a {
text-decoration: none;
color: black;
font-family: verdana;
}
nav ul li {
text-align: center;
list-style: none;
}
nav {
padding: 1em 0;
line-height: 2em;
background: lightgreen;
display: none;
}
nav.active {
display: block;
}
.xicon {
position: absolute;
right: 1em;
display: none;
}
.xicon.active {
display: block;
}
header {
width: 100vw;
position: fixed;
}
header.hide {
display: none;
}
main {
padding-top: 4em;
}
.one {
width: 20px;
height: 20px;
background: blue;
color: white;
}
.two {
width: 20px;
height: 20px;
background: green;
color: white;
}
.three {
width: 20px;
height: 20px;
background: red;
color: white;
}
.side {
width: 30px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
top: 50%;
background: black;
display: none;
border-radius: 10px;
}
.side.active {
display: flex;
}
.side.hide {
display: none;
}
.share {
position: fixed;
top: 50%;
background: black;
color: white;
font-family: verdana;
font-size: 1.3rem;
transform: rotateZ(-90deg);
transform-origin: 0 0;
padding: .15em 1em;
border-radius: 10px;
border: 1px solid white;
transition: 1s;
}
.share.hide {
transform: translateX(-120px);
}
<header>
<div class="logoandicon">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" width="30px" alt="burger-icon">
<img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<main>
<p class="share">Share</p>
<div class="side">
<div class="one">Fb</div>
<div class="two">Ig</div>
<div class="three">Tw</div>
</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi voluptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
</main>
<script src="main.js">
</script>

Your hide class should not only apply the translate, but also the rotation, like so:
.share.hide {
transform: translateX(-120px) rotateZ(-90deg);
}

Can you use left: -120px instead of transform: translate(-120px) ? You need absolute or relative position for this though. And when it should appear, set left: 0

SOLUTION
I managed to move it out of the viewport while maintaining the transform: rotateZ() proterty and the transition time, using:
margin-left: -35px;.
ALSO, as #Zohir Salak and #Turnip suggested in the comments above, chaining transform: rotateZ() with transform: translateX() on the same line, works as well.
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');
burger.addEventListener('click', () => {
nav.classList.toggle('active');
burger.classList.toggle('hide');
xicon.classList.toggle('active');
});
const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
nav.classList.toggle('active');
xicon.classList.toggle('active');
burger.classList.toggle('hide');
})
const header = document.querySelector('header');
let prev = window.pageYOffset;
window.addEventListener('scroll', function(){
let current = window.pageYOffset;
if(prev < current){
header.classList.add('hide');
}
else {
header.classList.remove('hide');
}
prev = current;
})
const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;
window.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset;
if(prevScroll < currentScroll) {
shareThing.classList.add('hide');
icons.classList.add('hide');
}
else {
shareThing.classList.remove('hide');
icons.classList.remove('hide');
}
prevScroll = currentScroll;
})
let share = document.querySelector('.share');
let icons = document.querySelector('.side');
share.addEventListener('click', () => {
icons.classList.toggle('active');
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logoandicon {
display: flex;
justify-content: space-between;
align-items: center;
background: powderblue;
padding: .7em 0;
}
.logo {
margin-left: .5em;
}
.burger {
margin-right: 1em;
z-index: 2;
}
.burger.hide {
display: none;
}
nav ul li a {
text-decoration: none;
color: black;
font-family: verdana;
}
nav ul li {
text-align: center;
list-style: none;
}
nav {
padding: 1em 0;
line-height: 2em;
background: lightgreen;
display: none;
}
nav.active {
display: block;
}
.xicon {
position: absolute;
right: 1em;
display: none;
}
.xicon.active {
display: block;
}
header {
width: 100vw;
position: fixed;
}
header.hide {
display: none;
}
main {
padding-top: 4em;
}
.one {
width: 20px;
height: 20px;
background: blue;
color: white;
}
.two {
width: 20px;
height: 20px;
background: green;
color: white;
}
.three {
width: 20px;
height: 20px;
background: red;
color: white;
}
.side {
width: 30px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
top: 50%;
background: black;
display: none;
border-radius: 10px;
}
.side.active {
display: flex;
}
.side.hide {
display: none;
}
.share {
position: fixed;
top: 50%;
background: black;
color: white;
font-family: verdana;
font-size: 1.3rem;
transform: rotateZ(-90deg);
transform-origin: 0 0;
padding: .15em 1em;
border-radius: 10px;
border: 1px solid white;
transition: 1s;
}
.share.hide {
margin-left: -35px;
}
/*OR
.share.hide {
transform: rotateZ(-90deg) translateX(-120px);
} /*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<div class="logoandicon">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" width="30px" alt="burger-icon">
<img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<main>
<p class="share">Share</p>
<div class="side">
<div class="one">Fb</div>
<div class="two">Ig</div>
<div class="three">Tw</div>
</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi vol uptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta fuptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
</main>
<script src="main.js">
</script>
</body>
</html>

Overflow property doesn't seem to work on navigation links' animation

I have this test page.
As you can see from the demo, I want the menu bar with the links to disappear to the right when the burger icon is not toggled, but overflow: hidden; doesn't seem to work.
Also, I noticed that if I hide the menu on the LEFT, so with a negative value: transform: translatex(-120%); instead of: transform: translatex(120%); I don't have this problem even without specifying overflow: hidden;.
I also tried giving a width to the body, 'cause I thought "how can it know where to stop 'spilling' content if I don't tell it?", but quiz-show wrong answer sound. :)
What am I doing wrong?
(By the way, this is the first time posting a snippet with some JS inside! Feel powerful :) )
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
overflow: hidden;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">
</script>

Check out this snippet:
let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')
toggleButton.addEventListener('click', () => {
navBarLinks.classList.toggle('active')
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
:root {
font-size: 15px;
}
header {
margin-bottom: -180px;
overflow-x: hidden;
}
.logoandburger {
display: flex;
width: 100vw;
justify-content: space-between;
align-items: center;
background: linear-gradient(45deg,lightpink,powderblue);
padding: 1em 1.5em;
position: relative;
z-index: 2;
}
.burger {
position: absolute;
left: 85%;
}
.bubbles {
position: relative;
top: -8px;
left: -20px;
display: none;
}
#keyframes bubbly {
from {
transform: scale(.5);
opacity: 0;
}
to {
transform: scale(1.9);
opacity: 1;
}
}
.burger:active ~ .bubbles {
display: block;
animation: bubbly .2s linear;
}
.nav1 {
background: linear-gradient(45deg,powderblue,lightpink);
text-align: center;
transform: translatex(120%);
transition: .5s;
}
.nav1.active {
transform: translatex(0%);
}
ul {
line-height: 2.5em;
padding: 1em 0;
overflow: hidden;
}
a {
color: black;
font-family: verdana;
font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<header id="nav2">
<div class="logoandburger">
<h1 class="logo">Logo</h1>
<img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
<img src="bubble.svg" class="bubbles" width="30px" alt="">
</div>
<nav class="nav1" id="nav1">
<ul class="nav">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>Contacts</li>
</ul>
</nav>
</header>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
</body>
</html>
You need to understand that <header> is overflowing not <nav class="nav1" id="nav1">. Also overflow is happening horizontally only.
Inside CSS, you just need to remove overflow: hidden; from your .nav1 and add overflow-x: hidden; to your header.

A white box appears when scrolling in google chrome on mobile

I am working on a website. Link to website. You can see the code on Github. Link to code.
If you don't want to do that here is HTML and CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="Assets/Style.css">
<title>Vaibhav Acharya</title>
</head>
<body>
<div class="notsp">Sorry! Your device is not supported. Try on a device with bigger width/height.</div>
<div class="blur">
<div class="mobnav">
<div class="mbtn mhomeI mactive" onclick="home()">Home</div>
<div class="mbtn maboutI" onclick="about()">About</div>
<div class="mbtn mcontactI" onclick="contact()">Contact</div>
<div class="mbtn">Blog</div>
</div>
</div>
<div class="title"><span>Vaibhav Acharya</span></div>
<nav>
<div class="btn homeI active" onclick="home()"><span class="fa fa-home"></span></div>
<div class="btn aboutI" onclick="about()"><span class="fa fa-info"></span></div>
<div class="btn contactI" onclick="contact()"><span class="far fa-address-book"></span></div>
<div class="btn"><span class="far fa-newspaper"></span></div>
</nav>
<div class="containers" id="home">
<div class="heading">Home</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="containers" id="about">
<div class="heading">About</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="containers" id="contact">
<div class="heading">Contact</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="foot">&copy Vaibhav Acharya 2018</div>
<div class="mobnavbtn" onclick="mobNav()"><span class="fa fa-bars"></span></div>
<script src="Assets/jquery-3.3.1.min.js"></script>
<script src="Assets/Script.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=K2D:100');
html, body{
margin: 0%;
padding: 0%;
max-width: 100%;
}
body{
background: linear-gradient(294deg, #9C27B0, #303F9F);
background-attachment: fixed;
color: white;
font-family: 'K2D','Open Sans', sans-serif;
}
.notsp{
display: none;
}
a{
text-decoration: none;
color: currentColor;
}
.blur{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 2;
display: none;
}
.title{
font-size: 2em;
font-weight: 900;
display: block;
text-align: center;
padding: 15px;
}
.title span{
background-color: rgba(255,255,255,0.6);
padding: 5px;
border-radius: 10px;
border-left: 10px solid rgba(255,255,255,0.6);
cursor: pointer;
}
nav{
display: block;
margin: 0px;
padding: 0px;
text-align: center;
}
.btn{
display: inline-block;
font-size: 3em;
padding: 5px;
padding-left: 50px;
padding-right: 50px;
transition: 0.5s all ease;
opacity: 0.3;
cursor: pointer;
}
.btn:hover{
opacity: 1;
}
.active{
text-shadow: 0 0 016px white;
opacity: 1;
}
.containers{
background-color: rgba(255,255,255,0.4);
min-height: 50vh;
display: block;
padding: 20px;
font-size: 1.3em;
}
#about, #contact{
display: none;
}
.heading{
display: block;
font-size: 2em;
text-align: center;
margin: 0px;
padding: 10px;
padding-top: 0px;
}
.foot{
display: block;
text-align: center;
padding: 10px;
}
.mobnavbtn{
position: fixed;
bottom: 0;
right: 0;
background: linear-gradient(294deg, #9C27B0, #303F9F);
z-index: 3;
margin: 10px;
padding: 15px;
border-radius: 40%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
cursor: pointer;
display: none;
}
.mobnav{
margin: 0px;
padding: 0px;
}
.mbtn{
display: block;
padding: 5px;
margin: 0px;
font-size: 3.5em;
text-align: center;
background-color: rgba(255,255,255,0.6);
cursor: pointer;
}
.mactive{
background: linear-gradient(294deg, #9C27B0, #303F9F);
}
#media only screen and (max-width: 630px){
nav{
display: none;
}
.mobnavbtn{
display: block;
}
}
#media only screen and (max-width: 319px){
div:not(.notsp), nav{
display: none;
}
.notsp{
display: block;
}
}
#media only screen and (max-height: 550px){
div:not(.notsp), nav{
display: none;
}
.notsp{
display: block;
}
}
So when i try to scroll it on mobile(Google Chrome) a white box appears on bottom of page. It disappears when i take my finger off screen.
Here is a image:
I want to know why it happens and how to remove it?

Issue is caused because of this property being set on the body.
"background-attachemnt:fixed;". removing this property fixes it.