Develop Reference

Terms and Conditions modal read-detection - Plain Javascript (No libraries)

I'm trying to figure out a way to create a scrollable modal that detects when the reader has scrolled to the bottom before enabling the 'Agree' button. This is for a Terms and Conditions type of box. I am also trying to create this with nothing more than plain html, css, and javascript. This is what I have so far.
var termsModal = document.getElementById("terms-modal");
// Get the button that opens the modal
var agreeCheckbox = document.getElementById("agree-checkbox");
// Get the <span> element that closes the modal
var closeModal = document.getElementsByClassName("close")[0];
var modalContent = document.getElementsByClassName("modal-content");
var agreeButton = document.getElementById("agreeBtn");
var agreementContainer = document.getElementById("agreement");
// Enables agree button when user scrolls all the way down
// modalContent.scroll(function() {
// var disable = (((agreementContainer.height())) >= (modalContent.scrollTop() + modalContent.height() + 1));
// agreeButton.disabled = disable;
// })
// When user clicks agree button in modal, keeps agree checkbox checked
agreeButton.onclick = function() {
agreeCheckbox.checked = true;
termsModal.style.display = "none";
}
// When the user clicks the button, open the modal
agreeCheckbox.onclick = function() {
if (agreeCheckbox.checked === true) {
termsModal.style.display = "block";
} else {
agreeCheckbox.checked === false;
}
}
// When the user clicks on <span> (x), close the modal
closeModal.onclick = function() {
termsModal.style.display = "none";
agreeCheckbox.checked = false;
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
termsModal.style.display = "none";
agreeCheckbox.checked = false;
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
padding-bottom: 100px;
left: 0;
top: 0;
scroll-behavior: smooth;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
/* overflow: auto; Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
overflow: hidden;
border-radius: 5px;
}
.modal-header {
display: flex;
justify-content: flex-end;
width: 100%;
padding-right: 5%;
}
.modal-inner-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* align-self: center; */
/* padding-bottom: 10%; */
width: 70%;
background-color: #fefefe;
border: 1px solid #888;
/* margin-bottom: 20%; */
margin-right: 10%;
margin-left: 10%;
height: 450px;
/* padding: 20px; */
border-radius: 5px;
}
#agreement {
height: 350px;
margin-bottom: 5%;
border-radius: 5px;
display: flex;
flex-direction: column;
}
/* Modal Content */
.modal-content {
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
background-color: #fefefe;
margin: auto;
/* padding: 20px; */
border: 1px solid rgb(179, 179, 179);
border-radius: 5px;
width: 97%;
/* margin-bottom: 20%; */
overflow-y: scroll;
}
.modal-footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<!-- <a href=""> -->
<input type="checkbox" id="agree-checkbox">
</>
<p>
I HAVE READ THE <span>PRIVACY POLICY</span> AND AGREE TO THE <span>TERMS AND CONDITIONS</span> OF THIS AGREEMENT.
</p>
<!-- </a> -->
<!-- The Modal -->
<div id="terms-modal" class="modal">
<div class="modal-inner-container">
<div class="modal-header">
<span class="close">×</span>
</div>
<!-- Modal content -->
<div class="modal-content">
<!-- <p>Some text in the Modal..</p> -->
<div id="agreement" class="termsImages">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae reprehenderit est, hic esse, numquam omnis autem exercitationem eum a nobis perspiciatis et labore voluptatibus accusamus molestias eveniet laboriosam amet cumque ut, fuga soluta atque
porro eaque voluptatem? Doloremque, culpa modi. Corrupti optio similique excepturi inventore architecto ipsum, officiis explicabo sunt ducimus, iusto dolorum animi eius pariatur fuga consectetur rerum? Ratione, amet. Explicabo culpa accusamus
consectetur esse odio quis, unde officiis quidem veniam, doloremque sed modi error tenetur eligendi quisquam molestiae, ut dicta suscipit nisi officia necessitatibus voluptatem ex delectus. Praesentium tenetur consequuntur repellendus voluptatum,
dolorem adipisci. Voluptate ab repellendus eum nobis alias quae corporis odit quasi unde, aut pariatur quod! Laboriosam qui quisquam minima quia, eum perspiciatis odio non ullam ipsum culpa quae iste voluptatum velit aspernatur? Nisi vitae dolor
fuga dignissimos facere culpa voluptate, delectus ipsam iste laboriosam at iure. Quod porro perferendis modi laboriosam, error expedita explicabo similique et ex, facilis dignissimos natus, tenetur cupiditate iure tempora debitis aspernatur
repudiandae sequi voluptatem eos blanditiis! Veritatis pariatur hic illum. Nemo laboriosam aliquam reiciendis! Voluptas sequi modi nisi veniam error vel aperiam a ab ipsam, nam porro rerum laudantium totam corporis suscipit maiores quam nihil
temporibus asperiores, ex consequuntur doloremque! Illo nisi tenetur minima consectetur ad iste non molestias fugit, laborum molestiae delectus fugiat saepe quos dolorum? Magni nobis consequatur ut maiores adipisci magnam rem ex odit nesciunt
ullam temporibus rerum quis, nostrum distinctio quisquam facilis quia ducimus necessitatibus impedit earum deleniti. Mollitia, tempore minima? Atque molestiae perspiciatis velit dolore eius? Nisi id aperiam magnam consequatur eum distinctio,
architecto aliquid temporibus. Natus accusantium magni fugit aliquid, libero ratione. Modi maiores asperiores, consectetur dignissimos impedit eaque similique culpa quo obcaecati sequi rerum possimus assumenda! Modi nesciunt alias quisquam quas!
Quas, maiores. Molestias tenetur nihil, ducimus nam a possimus fugit minima fugiat assumenda dolor molestiae soluta delectus veritatis laborum laudantium quia quae magnam porro saepe quibusdam doloremque. Dignissimos quaerat laborum possimus
quis nisi at, sequi delectus, quasi inventore tempore facilis modi repudiandae? Aperiam dolores quos inventore eveniet mollitia est ipsa. Nihil repellat molestiae possimus qui itaque! Cum id recusandae error et dolor beatae iure quidem dolorem
ratione, eveniet, consequuntur laborum veritatis. Sapiente quis nostrum possimus illo nihil quisquam consequuntur. Commodi quidem nisi rem porro impedit at, praesentium qui non fugiat aspernatur illo reiciendis et quos soluta atque similique
aut? Dolore illum quas obcaecati laboriosam, eos tempora delectus ex rerum iure, temporibus soluta voluptates. Neque recusandae, aspernatur inventore voluptatibus sint quae? Quibusdam repellendus deserunt nobis illo adipisci iste. Sed explicabo
dolore accusantium, inventore repellat ratione praesentium minus magni doloremque, itaque ab sunt error, at ut consectetur repudiandae ullam ea repellendus distinctio? Illum modi similique rerum tenetur odit ad quae, vitae architecto repellendus
illo harum iste quas iusto eveniet molestiae reprehenderit ab nisi quasi ullam. Aliquid enim vero hic ipsam natus consequuntur, at repellat ipsa inventore, sequi veritatis eveniet deserunt illum ut? Error a autem sint consequatur, nulla totam
quisquam. Dicta repellendus iste corporis ut? Iusto aperiam aut placeat recusandae similique quis perspiciatis fugit molestiae sapiente consectetur voluptates, quia quae tempora error obcaecati eum perferendis exercitationem ipsam delectus!
Saepe earum, alias hic dignissimos deleniti doloribus, minus architecto aliquam odio explicabo vitae ab, blanditiis numquam. Itaque nihil deleniti omnis nobis, vitae odit quam nam excepturi neque officiis iste ducimus quidem tenetur recusandae
voluptatem exercitationem, iure sequi sed eum repudiandae fugiat similique? Rem nostrum quidem in quia magnam necessitatibus placeat magni voluptate, dolorum quos adipisci molestiae quibusdam tempora sed, aperiam illum odio excepturi. Voluptate
nostrum natus, fugit perspiciatis tempora cupiditate officia alias eos, ducimus ad dolore autem excepturi laborum! Distinctio ad aliquid quibusdam odio nemo, itaque, totam inventore velit corporis illo, facere maxime consectetur fugit consequuntur
necessitatibus quia. Debitis adipisci recusandae dicta illo quisquam, tempora voluptas id odit et commodi ab, excepturi iure velit explicabo libero aliquid asperiores officiis vitae aperiam eius? Accusantium sint a labore, pariatur dolores,
veniam ipsa quae ab blanditiis consequuntur tempore optio vel aperiam sunt! Dolorem eius adipisci magni ab corrupti, dolor modi recusandae qui ut nam quasi minima ea voluptas ullam corporis blanditiis commodi iure voluptates obcaecati, ducimus
velit explicabo? Laborum sit temporibus magni illum qui assumenda porro inventore totam suscipit vero esse perferendis tenetur voluptates eligendi ratione, tempora maiores ex alias sequi impedit amet error. Voluptate, nobis labore, maxime eius
repudiandae iusto culpa quidem nisi quo, dicta consectetur sint! Et officiis itaque deleniti qui delectus molestiae, doloribus, cumque dolores fugiat inventore quisquam mollitia similique consequuntur sapiente. Nihil vero quod, fugit rerum consequuntur
ipsam magnam quibusdam blanditiis amet aut iusto corporis qui repellendus odit reiciendis maxime et sit dolore nam. Eligendi repellendus, at modi deserunt accusamus voluptate expedita eos culpa adipisci, voluptatum sed veniam quaerat quod quibusdam
distinctio natus animi odio maxime facere repudiandae! Minus dolore eum illum numquam! Labore velit enim amet at doloribus esse magnam natus eaque provident mollitia!
</p>
</div>
</div>
<div class="modal-footer">
<p class="instructions">Please read through to the end of the Agreement to enable the AGREE button.</p>
<button type="button" id="agreeBtn" class="agree-Btn" data-dismiss="modal" aria-hidden="true">AGREE</button>
</div>
</div>
</div>
It's not currently working. Any help is appreciated!

Could not set position:fixed for body

I am trying to fix menu-card as position : fixed for screen. But it sets at top of the center-grid not for screen.
This is the Link of my codes
https://stackblitz.com/edit/nextjs-tdbx6i?file=pages%2Findex.js
index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React, { useState } from 'react';
export default function Home() {
const [open, setOpen] = useState(false);
const contentMenuOpenHandler = () => {
document
.getElementById('contentMenu')
.classList.add(styles.open_content_menu);
console.log('hiiiiii');
};
const contentMenuCloseHandler = () => {
document
.getElementById('contentMenu')
.classList.remove(styles.open_content_menu);
};
return (
<>
<div className={styles.main}>
<div className={styles.left_grid}>hi1</div>
<div className={styles.center_grid}>
<div>
<p>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quo
iusto officia deserunt aliquam numquam optio at eum eos. Nemo
beatae possimus ipsum quam distinctio odio minus maiores
quibusdam. Quaerat sint dolorum impedit repellat corrupti libero
aperiam natus assumenda, voluptatem sequi accusamus minima ut
provident ipsam exercitationem dolorem id, officiis possimus
repudiandae nam eius dicta recusandae. Facere consectetur labore
suscipit, dolorum, sequi placeat impedit animi eum fugiat,
assumenda voluptatum corrupti. A expedita earum nam voluptatem in
dolor laborum ducimus, inventore temporibus obcaecati ipsum harum
ex reiciendis! Hic, ex deserunt reiciendis fugit laborum nulla
nobis consequuntur molestias. Autem quisquam a odio dolorum ab
magnam unde, re
</p>
<div
id="contentMenuBtn"
className={styles.content_menu_btn_grid_wrapper}
item
xs={12}
>
<div className={styles.content_menu_btn}>
<button className={styles.btn} onClick={contentMenuOpenHandler}>
<svg className={styles.svg} viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z" />
</svg>
</button>
</div>
</div>
<p>
pudiandae itaque delectus commodi. Molestias numquam sunt velit
corrupti animi dignissimos, necessitatibus deserunt repellat
veniam voluptates magnam eius veritatis ab quis inventore tempora.
Rerum ullam velit, natus, praesentium beatae aliquam mollitia enim
corrupti commodi accusamus deserunt soluta perferendis tempora
iure laborum quaerat culpa voluptatem veritatis impedit tempore
fugit atque iste? Quos neque possimus nihil illo recusandae?
Laborum animi unde aspernatur, veritatis incidunt magni eos
facilis non iste aut iure atque explicabo! Dolorem, maxime ea.
Vel, magnam ad, similique tempore tempora aspernatur, alias culpa
quas saepe excepturi deleniti reprehenderit in deserunt omnis nemo
rem exercitationem eveniet possimus repellat minus expedita? Iure
unde minus nostrum ducimus quidem? Reprehenderit, numquam aperiam!
Voluptatum, ab pariatur? Maxime, dolores eveniet! Quam sapiente
placeat labore ipsam, doloribus facilis eveniet obcaecati
praesentium cumque consectetur, temporibus magnam! Molestias
veritatis id magni, eius sint totam culpa non ex ad fugiat fugit
nam ullam, neque ipsam maxime est unde voluptates repudiandae
aperiam qui! Eum quasi nemo beatae saepe labore reiciendis, enim
sit iusto ipsum. Enim atque laborum, quisquam quia odit mollitia?
Dignissimos corporis tempora quasi numquam, cumque non vero odit
consequatur nisi dicta inventore exercitationem quam rerum
voluptas eius voluptatem quos. Sunt est rem provident
reprehenderit nemo ullam illum, tenetur aspernatur rerum. Porro
accusantium veritatis consequatur explicabo temporibus. Ullam,
expedita! Ratione possimus recusandae consectetur porro libero
quaerat. Doloribus suscipit itaque, obcaecati quibusdam omnis
explicabo libero ab cupiditate voluptates tenetur quis blanditiis
consequatur sit dicta placeat voluptas, veritatis error
consectetur sed ratione quidem reiciendis? Recusandae perferendis,
expedita hic quod placeat quo tempore aspernatur itaque, aperiam
quis ad a natus vero libero, maiores possimus. Ullam libero
similique asperiores dignissimos quaerat nobis temporibus quam
distinctio sapiente perspiciatis, officiis, excepturi, pariatur
illum cupiditate inventore necessitatibus voluptates deserunt
magnam quas ipsa unde. Exercitationem, vitae suscipit itaque
perferendis obcaecati nisi iusto incidunt eum fugiat odio dolore.
Reiciendis consequatur in, praesentium vero beatae iure ratione
assumenda distinctio reprehenderit voluptate. Rerum deserunt
tempore facilis sapiente totam magni, quam tenetur, sed
repudiandae atque labore. Tempore voluptas debitis quam quis
pariatur nam, dolor libero voluptatum impedit doloribus,
temporibus soluta eum, atque sunt fugit voluptatibus similique
sint assumenda asperiores eos. Architecto ut provident ad! Non
reprehenderit quo inventore vero, reiciendis deserunt
necessitatibus voluptatibus id magnam, eum ratione eligendi illo
natus eos voluptatem optio hic ex aut. Modi adipisci facilis,
labore quasi minus recusandae nam dignissimos inventore maxime.
Consequatur assumenda illum et temporibus accusantium sint impedit
ullam deleniti praesentium hic sunt velit tempore asperiores, id
corrupti vero ab veritatis eum aliquid inventore sequi
necessitatibus dolor ad? Placeat quia natus architecto ut dolorum
fugiat atque pariatur itaque, velit dolor recusandae sunt. A nulla
tempore numquam deserunt libero dicta nisi deleniti quam? Esse
repudiandae, quisquam soluta itaque quo molestias placeat? Porro
ducimus, tenetur mollitia numquam consectetur impedit nulla
incidunt nostrum fugit neque illo enim possimus culpa corporis
iure accusantium dicta earum exercitationem obcaecati molestias
cupiditate saepe. Quod enim atque iste facere repellendus
quibusdam nihil ipsam ea modi. Error molestias corrupti quibusdam
consequuntur sapiente enim consectetur deserunt quas reiciendis
nisi pariatur, dolor assumenda nesciunt, dolores, excepturi
obcaecati officiis. Quo provident, a delectus quia maxime
accusantium amet minima, nobis quas necessitatibus voluptas magnam
ipsum tenetur porro, est quod labore veniam! Voluptatum quo
tenetur quisquam dolorem nemo possimus expedita quidem? Accusamus
impedit eum facilis accusantium, molestiae assumenda explicabo
corrupti nobis doloribus nisi sequi sint eaque aspernatur ab cum
numquam saepe nam tempore illum dolores ea labore, fuga facere.
Sed inventore error amet incidunt, quibusdam qui provident,
nesciunt sint omnis ipsa porro ab temporibus impedit! Hic iste
voluptatem quisquam? Deleniti magni quaerat, ipsam dolor deserunt
modi dicta at repellat. Minima sed, rerum ipsa autem quo sit,
placeat eaque amet, adipisci omnis quam ullam exercitationem
asperiores! Eveniet vel beatae reprehenderit consequuntur
accusamus officiis optio ut non facilis animi aliquam odio tempora
minima, perferendis incidunt maiores magni quae quas laboriosam
quo iste veritatis aperiam, vero in. Vitae error perspiciatis
quidem accusamus enim reprehenderit quod voluptatem delectus! Qui
amet quia perferendis sed dolore id exercitationem saepe veritatis
sequi. Cum, iusto laudantium quod minima odio dolorum praesentium
aliquid unde voluptatem expedita architecto impedit modi
inventore. Voluptatem deleniti non ipsum. Corporis, totam eos
doloribus nihil molestias libero, dicta sit debitis numquam atque
ipsum placeat ullam labore incidunt assumenda iste aspernatur
necessitatibus voluptatum iure qui hic, tempora officiis vitae!
Quis hic itaque sit nihil consectetur facere, quo, cum blanditiis
provident illo, totam sunt? Quidem itaque incidunt iure voluptate
quia? Animi magnam architecto, consectetur
</p>
<p>
laboriosam quas voluptatum accusamus placeat necessitatibus
voluptatem ipsam tempore assumenda aliquid sequi quisquam
voluptatibus, amet excepturi reprehenderit ea iusto provident! Ea
beatae enim modi nobis quibusdam soluta culpa suscipit dolor
perspiciatis exercitationem fugit necessitatibus consequatur
repellendus quidem, perferendis ullam quasi, aut tempore! Natus
accusantium atque ipsum reprehenderit? Et atque iste, cum esse
quia assumenda, explicabo dolore asperiores enim possimus
laudantium molestias eveniet a impedit facilis earum
exercitationem blanditiis obcaecati consequuntur deleniti, laborum
nesciunt inventore voluptates? Vel ullam vitae aliquid sapiente
quas ea ipsam in eaque, aut culpa dolor autem ad architecto, harum
eum ex accusantium earum officiis itaque? Ullam, provident porro
maxime cum, quos consequuntur officiis architecto laborum ut vel,
itaque impedit sit sunt atque natus reiciendis accusantium
molestiae esse numquam. Voluptas, magni! Beatae commodi adipisci
repudiandae eveniet illum saepe nobis aspernatur id accusamus,
tenetur similique voluptatibus enim dolorum, iure nam ipsam
officia sed. Dicta rerum nesciunt saepe illo consequatur. Eveniet
voluptas necessitatibus hic deleniti reprehenderit quidem quod
quisquam modi! Nihil ipsum fuga hic labore provident? Accusantium,
rem.{' '}
</p>
<div id="contentMenu" className={styles.menu_card_warapper}>
<div className={styles.close_btn_block}>
<button
className={styles.close_btn}
onClick={contentMenuCloseHandler}
>
Close
</button>
</div>
<div>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</div>
</div>
</div>
</div>
<div className={styles.right_grid}>hi3</div>
</div>
</>
);
}
home.module.scss
.main {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 100%;
flex-direction: row;
background-color: rgb(104, 104, 23);
}
.center_grid {
max-width: 56%;
flex-basis: 56%;
width: 56%;
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
background-color: green;
}
.left_grid {
position: fixed;
width: 22%;
left: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.right_grid {
position: fixed;
width: 22%;
right: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.content_menu_btn_grid_wrapper {
position: sticky;
top: 60vh;
right: 0;
z-index: 1;
}
.content_menu_btn {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 1rem;
margin-bottom: -3.5rem;
}
.btn {
background-color: pink;
border: none;
cursor: pointer;
margin: 0;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
border-radius: 50%;
box-shadow: 0 3px 10px rgba(#000, 0.3);
margin-top: 4rem;
margin-right: 1rem;
}
.svg {
width: 30px;
height: 30px;
fill: white;
}
.open_content_menu {
display: block !important;
}
.menu_card_warapper {
position: fixed;
top: 0;
z-index: 1001;
display: none;
width: 100%;
left: 0;
background-color: #ffffff;
overflow: hidden;
border: 10px black solid;
}
.close_btn_block {
background-color: yellow;
}
I need, when I click Menu-button the menu-card should open and it should fix center of the screen. When I scroll it should not move. and When I close the curse should be in initial stage not on the top of the center-grid
What is the issue in my codes? Anyone give me the solutions please.
Thanks

position: fixed won't work when you apply transform: translate to its parent. If you want to center the elements set the parent div's (.center_grid) position to relative and use margin: auto, it will have the same effect.
Also set your fixed menu's position to center by using transform:translateX(-50) and set width to 56%.
.center_grid {
max-width: 56%;
flex-basis: 56%;
width: 56%;
/*position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;*/
position: relative;
margin: auto;
background-color: green;
}
.menu_card_warapper {
position: fixed;
top: 0;
z-index: 1001;
display: none;
background-color: #ffffff;
overflow: hidden;
border: 10px black solid;
width: 56%;
left: 50%;
transform: translateX(-50%);
}
Stack overflow answer reference: 'transform3d' not working with position: fixed children
Your updated codesandbox and live preview link

Background video stuck in a fixed position and not moving with the page

While scrolling my background video is stuck on the screen. I have set the position to fixed but I want it to stop acting when the next container starts.
I also want the text of that video container to go sliding up through the video while scrolling and the same with the next container texts
I have tried replacing the position: fixed with background-poistion: fixed with no desirable changes
#title {
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
top: 0;
display: flex;
flex-direction: row;
}
.logo {
width: 4%;
top: 6px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -8px -40px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg, blue, white, yellow);
}
body {
box-sizing: border-box;
}
#header {
position: sticky;
top: 0;
;
}
#header-img {
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover {
margin: 0.5px -10px 0px -10px;
position: fixed;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml {
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text {
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 1;
font-size: 50px;
}
.policies {
margin-top: 0px;
background-color: whitesmoke;
display: grid;
position: relative;
}
#prod {
margin-top: 30px;
position: absolute;
top: 860px;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap" type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat
porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia
fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae!
Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam
soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid
tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem
reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam
deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum
ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse,
dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis
consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati
necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam
culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis,
magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam
doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid,
porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat
delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate?
Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis
cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati
odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci
a similique?</h5>
</section>
</body>
</html>

do you want something like this? If you want this, simply delete the html in the video section and use the code snippet.
var video = document.querySelector('#ds');
window.onscroll = () => {
if (document.querySelector('.hd-a').getBoundingClientRect().bottom < 0) {
video.pause();
} else {
if (!video.play()) {
video.play();
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hd-a {
position: relative;
width: 100%;
height: 100vh;
background-color: red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hd-a #ds {
min-width: 100vw;
position: absolute;
}
.hd-a .desc {
position: absolute;
z-index: 99;
color: #fff;
text-align: center;
padding-left: 50px;
padding-right: 50px;
}
.desc p {
margin-top: 50px;
}
<div class="hd-a">
<div class="desc">
<h1>Lorquasi, velit, quam sit ipsa officia illo veritatis expedita</h1>
<p>Loremque adipisci sequi animi dicta!</p>
</div>
<video autoplay muted loop id="ds">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem amet officia mollitia repudiandae autem, voluptates cupiditate consequuntur aspernatur repellat atque eum error dolorum quos numquam natus! Officia laborum facere earum iste molestias dignissimos
laboriosam, aliquam vel incidunt fuga. Dolorem doloribus veritatis magni expedita voluptas sit earum laudantium blanditiis reprehenderit quis! Impedit excepturi consequuntur porro tempore atque sequi eaque unde ut neque rerum odio nisi repellendus veniam
voluptates veritatis doloribus cumque consequatur sunt beatae aperiam quasi, non sapiente! Praesentium, eaque aut! Amet illo nostrum non qui blanditiis repellat fugiat, voluptatum reiciendis, asperiores totam harum aliquid facere consectetur, corporis
laboriosam porro impedit delectus quas natus! Sequi deserunt aliquid veritatis ea doloribus quasi neque molestias atque, itaque dicta corrupti, necessitatibus a quaerat, quia explicabo quisquam iste est aut deleniti id. Sed blanditiis nemo eos debitis
perferendis suscipit hic nesciunt, illo ducimus praesentium laborum quaerat eum. Voluptate, cum obcaecati? Voluptatem perferendis in animi sit repellat! At dolor eveniet dolores iure est sunt dolorem magnam illum ea, numquam sapiente atque eius voluptates
veniam, nihil expedita laborum quis ipsam labore officiis animi. Exercitationem, qui possimus nesciunt maxime id voluptates maiores, error unde modi debitis similique nihil temporibus! Quae eius iure minus ut eaque architecto quaerat similique incidunt
modi illum, expedita natus tenetur. Similique possimus quam vero quia sit doloremque tempore. Beatae ipsa similique voluptatibus maiores perspiciatis excepturi voluptates? Doloribus impedit dolor debitis quibusdam qui quidem! Incidunt itaque, vitae
laboriosam, optio impedit aliquid at cumque fugiat consequuntur praesentium vel excepturi nihil omnis animi voluptatum officiis voluptatem vero aspernatur aliquam? Omnis itaque ratione ducimus inventore debitis, pariatur, similique iste cumque nobis
exercitationem rem consequatur possimus veniam soluta, praesentium ut repellat illum. Nemo odio, quaerat numquam, expedita obcaecati saepe culpa esse amet provident ratione unde officiis. Quod aperiam molestiae ex quaerat animi iusto autem tempora,
neque consectetur nostrum assumenda mollitia natus tempore, dolorum soluta asperiores vel ipsam facilis non aliquam! Doloribus, adipisci at praesentium accusantium laborum aut dicta cum atque dolore qui quis magnam fuga delectus cumque error enim esse
eum? Nulla doloribus quis voluptas repellat molestias cupiditate est quibusdam. Expedita tempore corporis non iure animi, amet esse quaerat error impedit aliquam ipsum, et odio, accusamus earum ratione ut. Omnis ipsam iure error ullam ducimus sunt consequatur
neque itaque culpa aliquid hic quo, ratione nulla a amet earum quae iste minus fuga reiciendis nam dolore debitis molestiae. Qui, sapiente. Et illo vel voluptas nioluptas hic eum modi, sint temporibus officia assumenda est corrupti sed quisquam minus
ab inventore eveniet eos sequi consequatur. Labore, delectus doloribus iure id odit nemo accusantium fugit exercitationem odio nobis consequatur error placeat assumenda pariatur adipisci libero nesciunt voluptas laborum ratione minima. Eius, facere,
recusandae pore voluptatem quaerat fugit cumque quam ex eaque, dolores, repellendus earum officia sapiente magnam aliquam optio! Alias quia autem debitis consequuntur temporibus ipsam quam placeat eum iste atque ea quod nobis labore non impedit voluptas
dolor recusandae eaque nam omnis fugit, at, delectus quae? Porro error aut rem at earum, officiis placeat magnam magni eius. Quasi eveniet ex quaerat dolorem impedit corporis aspernatur, non consequuntur.</p>

How to not highlight every single link when navigating to a link after scrolling?

I have these links that work just fine when scrolling. My issue is that if I click on a single link (Example: Blog) just want to go straight to that link without having to travel to each link in order to make it to "Blog" link. Can someone point me in the right direction or tell me what I'm missing? Thanks a lot in advance!
Here is LIVE DEMO
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
NOTE: I still want to keep the smooth scrolling functionality.

You can manually disable scroll spy on click by link and then enable it by timeout.
let disableScrollControl = false;
let oldTimeoutId;
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
disableScrollControl = true;
document.querySelectorAll('nav ul li a').forEach(otherLink => {
otherLink.classList.remove('active');
});
link.classList.add('active');
if (oldTimeoutId) {
clearTimeout(oldTimeoutId);
}
oldTimeoutId = setTimeout(() => {
disableScrollControl = false;
oldTimeoutId = undefined;
}, 1000);
});
});
//Active navigation on scroll
window.addEventListener('scroll', event => {
if (disableScrollControl) {
return;
}
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
navigationLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
<!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">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li><a class="nav-link active" href="#home">Home</a></li>
<li><a class="nav-link" href="#services">Services</a></li>
<li><a class="nav-link" href="#about-us">About Us</a></li>
<li><a class="nav-link" href="#blog">Blog</a></li>
<li><a class="nav-link" href="#contact-us">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

We can set some sort of marker when a link is clicked and change the behaviour on scroll slightly so that if that marker is set the intermediary links don't get highlighted.
Change the li elements so they do something on the link being clicked as well, so the list becomes:
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
The changed JavaScript is:
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
You can see it working by running the snippet (use Full Page mode)
<!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">
<title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
<link rel="stylesheet" href="main.css">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: whitesmoke;
display: grid;
justify-items: center;
align-items: center;
overflow-x: hidden;
margin-top: 44px;
scroll-padding-top: 44px;
}
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 1280px;
background: #fff;
}
/** Header **/
header {
position: fixed;
position: -webkit-fixed;
top: 0;
width: 1280px;
background: #fff;
z-index: 1000;
border-bottom: 1px solid darkturquoise;
}
/** Navigation **/
.nav-container {
width: 1280px;
margin: auto;
padding: 10px 0;
}
.nav-checkbox {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-items: center;
}
.nav-logo {
text-decoration: none;
color: darkturquoise;
display: grid;
justify-self: start;
margin-left: 20px;
padding: 2px;
font-weight: 600;
}
.nav-logo:hover {
color: #000;
}
.tab-nav {
display: none;
}
.tab-nav-label {
color: #000;
display: none;
}
.tab-content {
list-style: none;
justify-self: end;
margin: 0;
padding: 0;
}
.tab-content li {
display: inline-block;
margin-right: 20px;
}
.tab-content li a {
text-decoration: none;
color: #000;
font-weight: 600;
}
/** style on scroll **/
.nav-container.scroll {
background: darkturquoise;
}
.nav-container.scroll a {
color: #fff;
}
/** active navigation **/
.nav-container.scroll a.active {
color: #000;
border-bottom: 2px solid #000;
}
.nav-container a.active {
color: darkturquoise;
border-bottom: 2px solid darkturquoise;
}
/** section **/
section {
padding: 20px;
text-align: center;
}
section h1 {
padding: 20px;
}
/** footer **/
footer {
min-height: 600px;
background: darkturquoise;
text-align: center;
}
/** media screen **/
#media screen and (max-width: 1280px) {
#main {
width: 100%;
}
header {
width: 100%;
}
.nav-container {
width: 100%;
}
}
#media screen and (max-width: 768px) {
.tab-content {
display: grid;
grid-template-columns: 1fr;
grid-column: 1/4;
text-align: center;
max-height: 0;
overflow: hidden;
justify-self: center;
transition: all ease-in-out 0.4s;
-o-transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
}
.tab-nav-label {
display: grid;
cursor: pointer;
grid-column: 3;
padding-right: 20px;
}
.nav-checkbox input:checked ~ .tab-content {
max-height: 400px;
}
.tab-content li {
padding: 10px 0;
margin-right: 0px;
}
.nav-checkbox input:checked ~ .tab-nav-label {
color: #000;
}
}
.myvideo {
text-decoration: none;
color: #fff;
background: red;
text-align: center;
padding: 10px;
font-weight: 600;
z-index:100;
position: absolute;
bottom: 0px;
}
.myvideo:hover {
color: #000;
}
</style>
</head>
<body>
<main id="main">
<!-- Header -->
<!-- Navigation -->
<header>
<div class="nav-container">
<nav class="nav-checkbox">
LOGO
<input type="checkbox" id="tab-nav" class="tab-nav">
<label for="tab-nav" class="tab-nav-label">Menu</label>
<ul class="tab-content">
<li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
<li onclick="noHighlighting(this);">Services</li>
<li onclick="noHighlighting(this);">About Us</li>
<li onclick="noHighlighting(this);">Blog</li>
<li onclick="noHighlighting(this);">Contact Us</li>
</ul>
</nav>
</div>
</header>
<!-- section -->
<section id="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
</section>
<section id="services">
<h1>Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
</section>
<section id="about-us">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
</section>
<section id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
</section>
<section id="contact-us">
<h1>Contact Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
</section>
<!-- footer -->
<footer>
<h1>Footer</h1>
</footer>
</main>
<script>
//On link click suppress intermediate highlighting
function noHighlighting(link) {
document.querySelector('nav').classList.add('noHighlighting');
link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
navigationLinks.forEach(link => {
link.classList.remove('active');
let section = document.querySelector(link.hash);
let onScreen =
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop;
if ((onScreen && show) || link.classList.contains('linkSelected')) {
link.classList.add('active');
if (onScreen&&(link.classList.contains('linkSelected'))) {
link.classList.remove('linkSelected');
document.querySelector('nav').classList.remove('noHighlighting');
}
}
});
});
</script>
Click Here To View My Video On YouTube
<script src="index.js"></script>
</body>
</html>

Firstly, I think there are some problems with the current approach.
To illustrate that, if you place a console.log statement inside the window's scroll event handler:
/* ... */
let fromTop = window.scrollY;
console.log('scroll event');
navigationLinks.forEach(link => { /* ... */ })
/* ... */
and click on Blog link, the console would print the message at least 20 times. Considering that the navigationLinks.forEach loop will run for each invocation of the handler, I'd say this is not the most efficient approach. There is also the fact that you query the DOM on each invocation as well, which it is not recommended.
With that in mind, here would be my approach:
const linksContainer = document.querySelector(".tab-content");
let prevActiveLink = document.querySelector(".tab-content .active");
// attaching the listener only on the container
// with the help of event bubbling, this handler will be called
// `ev.target` - the element that started the event
// `ev.currentTarget` - the element to which the handler attached
linksContainer.addEventListener('click', ev => {
// if we clicked on the container, no need to go further
if (ev.target === ev.currentTarget) {
return
}
console.log(ev)
const currentLink = ev.target;
if (currentLink === prevActiveLink) {
return;
}
prevActiveLink && prevActiveLink.classList.remove('active');
currentLink.classList.add('active')
prevActiveLink = currentLink;
})
Demo.
EDIT - using debounce
const handler = event => {
let navigationLinks = document.querySelectorAll('nav ul li a');
let fromTop = window.scrollY;
console.log('scroll event')
navigationLinks.forEach(link => {
/* ... */
});
}
const debounce = (fn, time) => {
let id;
return ev => {
id && clearTimeout(id);
id = setTimeout(fn, time, ev)
}
}
window.addEventListener('scroll', debounce(handler, 100));
Demo

The only thing that you need to do is to add a debounce function so that your scroll event handler is 'deferred' to the future. For example:
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
//Active navigation on scroll
window.addEventListener('scroll', debounce(() => {
// ... your existing logic for scroll event
}, 50));
P.S. debounce function implementation is taken from here.
Updated pen is here

Fix Modal Problems In Javascript and Css

How can I fix the body scrollbar problem, However, I assign the modal style to padding-left: 17px; but it just hides the modal scrollbar. How to hide the body scrollbar when the modal is active (like bootstrap)
Note:
When I active the modal (I can assign body overflow: hidden) and when I remove the active class from the modal (I can assign body overflow: scroll) ---> is it good?
My code :
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active');
// document.body.style.overflow = 'hidden';
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
// document.body.style.overflow = 'scroll';
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
padding-left: 17px;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>

You could continue using your approach of manipulating the classes. Simply define a class with overflow: hidden and add that class to the body element. Once you close the modal remove that class from the body element.
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active'); document.querySelector('body').classList.add('modal-active');
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
document.querySelector('body').classList.remove('modal-active');
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
padding-left: 17px;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
.modal-active {
overflow: hidden;
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>