Related
I am creating a Whatsapp Navbar,
and I am having a problem with the sticky navbar.
see below for details
let navItems = document.querySelectorAll(".nav-item");
// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);
navItems.forEach((item, index) => {
item.addEventListener("click", () => {
// changing a css variable, and all the logic is in CSS
document.body.style.setProperty("--index", `${index}`);
toogleActive();
function toogleActive() {
// for setting opacity low to other not clicked icons
navItems.forEach((itemWithClass) => {
itemWithClass.classList.remove("active");
});
// making visible the active clicked item
item.classList.add("active");
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
:root {
--nav-height: 3rem;
--nav-bg: rgb(0, 128, 105);
--text-color: white;
--anim-speed: 0.5s;
color-scheme: light dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
header {
background-color: var(--nav-bg);
height: var(--nav-height);
display: grid;
place-items: center start;
}
nav {
display: flex;
height: var(--nav-height);
background-color: var(--nav-bg);
color: var(--text-color);
text-transform: uppercase;
font-family: poppins;
user-select: none;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
position: sticky;
top: 0;
width: 100vw;
}
nav .nav-item {
flex: 1;
display: grid;
place-items: center;
opacity: 0.5;
transition: opacity var(--anim-speed);
}
nav .nav-item:active {
background-color: rgba(255, 255, 255, 0.2);
}
nav .nav-item.active {
opacity: 1;
}
nav::before {
--indicator-width: calc(100% / var(--total-nav-items));
content: "";
position: absolute;
height: 0.2rem;
width: 100px;
background-color: var(--text-color);
bottom: 0;
width: var(--indicator-width);
left: calc(var(--index, 0) * var(--indicator-width));
transition: left var(--anim-speed);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
#container {
/* border: 5px solid red; */
/* position: fixed; */
position: relative;
z-index: -1;
/* height: calc(100vh - var(--nav-height)); */
left: calc(-1 * (var(--index, 0) * 100vw));
transition: left var(--anim-speed);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100vw;
}
#container>* {
/* border: 2px solid red; */
height: calc(100vh - var(--nav-height));
padding: 0 1rem;
}
#media (prefers-color-scheme: dark) {
:root {
--nav-bg: rgb(31, 44, 52);
--text-color: rgb(9, 148, 115);
}
}
<header>
<span>Whatsapp</span>
</header>
<nav>
<div class="nav-item active">hello 1</div>
<div class="nav-item">hello 2</div>
<div class="nav-item">hello 3</div>
<div class="nav-item">hello 4</div>
<div class="nav-item">hello 5</div>
</nav>
<div id="container">
<!-- 1 -->
<section>
<h1>PAGE 1</h1>
<p>
<!-- see the fifth for the longest paragraph -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
</p>
</section>
<!-- 2 -->
<section>
<h1>PAGE 2</h1>
<p>
Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
</p>
</section>
<!-- 3 -->
<section>
<h1>PAGE 3</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 4 -->
<section>
<h1>PAGE 4</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 5 -->
<section>
<h1>PAGE 5</h1>
<p>
<!-- this is very long for a reason -->
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
</p>
</section>
</div>
the sticky is ✅ working fine,
❌ but the problem if I am viewing in another page that has a little text,
the scrollbar still appears.
this is because they follow the height of the container that have inside the section. and since the container have inside 5 sections nested it will have only the bigger height.
so in this example "page 5" have a lot of text and is creating the scrollbar.
so I want that if I am in "page 1" there isn't any sticky functionality, no scrollbar.
if page 5 then yes, we add that scrollbar and then we have also sticky functionality.
this is difficult since I have a page transition on it.
edit: now I find also a solution myself :)
function disactivateScroll() {
let navHeight = document.querySelector("nav").offsetHeight;
let minHeightSection = window.innerHeight - (navHeight * 2);
if(sections[index].offsetHeight > minHeightSection) {
document.body.style.overflowY = "auto";
} else {
document.body.style.overflowY = "hidden";
}
}
body {
overflow: hidden;
}
let navItems = document.querySelectorAll(".nav-item");
let sections = document.querySelectorAll("#container > *");
// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);
navItems.forEach((item, index) => {
item.addEventListener("click", () => {
// changing a css variable, and all the logic is in CSS
document.body.style.setProperty("--index", `${index}`);
toogleActive();
disactivateScroll();
function toogleActive() {
// for setting opacity low to other not clicked icons
navItems.forEach((itemWithClass) => {
itemWithClass.classList.remove("active");
});
// making visible the active clicked item
item.classList.add("active");
}
function disactivateScroll() {
let navHeight = document.querySelector("nav").offsetHeight;
let minHeightSection = window.innerHeight - (navHeight * 2);
if (sections[index].offsetHeight > minHeightSection) {
document.body.style.overflowY = "auto";
} else {
document.body.style.overflowY = "hidden";
}
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
:root {
--nav-height: 3rem;
--nav-bg: rgb(0, 128, 105);
--text-color: white;
--anim-speed: 0.5s;
color-scheme: light dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
}
header {
background-color: var(--nav-bg);
height: var(--nav-height);
display: grid;
place-items: center start;
}
nav {
display: flex;
height: var(--nav-height);
background-color: var(--nav-bg);
color: var(--text-color);
text-transform: uppercase;
font-family: poppins;
user-select: none;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
position: sticky;
top: 0;
width: 100vw;
}
nav .nav-item {
flex: 1;
display: grid;
place-items: center;
opacity: 0.5;
transition: opacity var(--anim-speed);
}
nav .nav-item:active {
background-color: rgba(255, 255, 255, 0.2);
}
nav .nav-item.active {
opacity: 1;
}
nav::before {
--indicator-width: calc(100% / var(--total-nav-items));
content: "";
position: absolute;
height: 0.2rem;
width: 100px;
background-color: var(--text-color);
bottom: 0;
width: var(--indicator-width);
left: calc(var(--index, 0) * var(--indicator-width));
transition: left var(--anim-speed);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
#container {
/* border: 5px solid red; */
/* position: fixed; */
position: relative;
z-index: -1;
/* height: calc(100vh - var(--nav-height)); */
left: calc(-1 * (var(--index, 0) * 100vw));
transition: left var(--anim-speed);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100vw;
}
#container>* {
/* border: 2px solid red; */
height: min-content;
min-height: calc(100vh - (var(--nav-height) * 2));
padding: 0 1rem;
border: 5px solid red;
}
#media (prefers-color-scheme: dark) {
:root {
--nav-bg: rgb(31, 44, 52);
--text-color: rgb(9, 148, 115);
}
}
you can use position: absolute to remove elements from the document flow:
let navItems = document.querySelectorAll(".nav-item");
const sections = Array.from(document.querySelectorAll("#container > section"));
sections.forEach((section, index) => section.style.setProperty("--section", index));
// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);
navItems.forEach((item, index) => {
item.addEventListener("click", () => {
// changing a css variable, and all the logic is in CSS
document.body.style.setProperty("--index", `${index}`);
toogleActive();
function toogleActive() {
// for setting opacity low to other not clicked icons
navItems.forEach((itemWithClass) => {
itemWithClass.classList.remove("active");
});
sections.forEach((section, sectionIndex) => section.classList.toggle("active", sectionIndex === index))
// making visible the active clicked item
item.classList.add("active");
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
:root {
--nav-height: 3rem;
--nav-bg: rgb(0, 128, 105);
--text-color: white;
--anim-speed: 0.5s;
color-scheme: light dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
header {
background-color: var(--nav-bg);
height: var(--nav-height);
display: grid;
place-items: center start;
}
nav {
display: flex;
height: var(--nav-height);
background-color: var(--nav-bg);
color: var(--text-color);
text-transform: uppercase;
font-family: poppins;
user-select: none;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
position: sticky;
top: 0;
width: 100vw;
z-index: 1;
}
nav .nav-item {
flex: 1;
display: grid;
place-items: center;
opacity: 0.5;
transition: opacity var(--anim-speed);
}
nav .nav-item:active {
background-color: rgba(255, 255, 255, 0.2);
}
nav .nav-item.active {
opacity: 1;
}
nav::before {
--indicator-width: calc(100% / var(--total-nav-items));
content: "";
position: absolute;
height: 0.2rem;
width: 100px;
background-color: var(--text-color);
bottom: 0;
width: var(--indicator-width);
left: calc(var(--index, 0) * var(--indicator-width));
transition: left var(--anim-speed);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
#container {
position: relative;
overflow-y: hidden;
}
#container>* {
position: absolute;
padding: var(--nav-height) 1rem 0;
width: 100%;
left: calc(100vw * (var(--section) - var(--index, 0)));
transition: left var(--anim-speed);
}
#container > .active {
position: relative;
}
#media (prefers-color-scheme: dark) {
:root {
--nav-bg: rgb(31, 44, 52);
--text-color: rgb(9, 148, 115);
}
}
<header>
<span>Whatsapp</span>
</header>
<nav>
<div class="nav-item active">hello 1</div>
<div class="nav-item">hello 2</div>
<div class="nav-item">hello 3</div>
<div class="nav-item">hello 4</div>
<div class="nav-item">hello 5</div>
</nav>
<div id="container">
<!-- 1 -->
<section class="active">
<h1>PAGE 1</h1>
<p>
<!-- see the fifth for the longest paragraph -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
</p>
</section>
<!-- 2 -->
<section>
<h1>PAGE 2</h1>
<p>
Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
</p>
</section>
<!-- 3 -->
<section>
<h1>PAGE 3</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 4 -->
<section>
<h1>PAGE 4</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 5 -->
<section>
<h1>PAGE 5</h1>
<p>
<!-- this is very long for a reason -->
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
</p>
</section>
</div>
I've edited your snippet to get the desired effect for your code. What I changed was moving from using CSS variables to "push" the content to different areas of the screen to change the visibility, I simply created two states for your sections:
active (Flexbox)
inactive (Invisible)
Then, switching from a grid display to using flexbox on the sections allows for the scroll behavior desired. I also set a fixed max height on active sections and a reactive bottom padding to make it nice for the user. These aspects are adjustable to your desire, however.
Hopefully this helps and I'd be more than happy to explain my answer in more detail
let navItems = document.querySelectorAll(".nav-item");
let sections = Array.from(document.getElementById("container").children);
//Initially make all other sections inactive except the first
sections.forEach((section, index) => {
if(index == 0) section.classList.add("active-section");
else section.classList.add("inactive-section");
});
navItems.forEach((item, index) => {
item.addEventListener("click", () => {
toogleActive(index);
function toogleActive(index) {
// for setting opacity low to other not clicked icons
navItems.forEach(itemWithClass => {
itemWithClass.classList.remove("active");
});
//Make sections visible or invisible based on nav item clicked
sections.forEach((section, i) => {
if(i != index) {
section.classList.remove("active-section");
section.classList.add("inactive-section");
} else {
section.classList.remove("inactive-section");
section.classList.add("active-section");
}
});
// making visible the active clicked item
item.classList.add("active");
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
:root {
--nav-height: 3rem;
--nav-bg: rgb(0, 128, 105);
--text-color: white;
--anim-speed: 0.5s;
color-scheme: light dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
header {
background-color: var(--nav-bg);
height: var(--nav-height);
display: grid;
place-items: center start;
}
nav {
display: flex;
height: var(--nav-height);
background-color: var(--nav-bg);
color: var(--text-color);
text-transform: uppercase;
font-family: poppins;
user-select: none;
/* position: fixed; */
/* top: 0; */
/* left: 0; */
position: sticky;
top: 0;
width: 100vw;
}
nav .nav-item {
flex: 1;
display: grid;
place-items: center;
opacity: 0.5;
transition: opacity var(--anim-speed);
}
nav .nav-item:active {
background-color: rgba(255, 255, 255, 0.2);
}
nav .nav-item.active {
opacity: 1;
}
nav::before {
--indicator-width: calc(100% / var(--total-nav-items));
content: "";
position: absolute;
height: 0.2rem;
width: 100px;
background-color: var(--text-color);
bottom: 0;
width: var(--indicator-width);
left: calc(var(--index, 0) * var(--indicator-width));
transition: left var(--anim-speed);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
#container {
position: fixed;
top: --nav-height
display: flex;
height: 100vh;
}
.active-section {
display: flex;
flex-direction: column;
max-height: 90vh;
overflow-y: scroll;
padding: 5%;
padding-bottom: 10%;
}
.inactive-section {
display: none;
}
#media (prefers-color-scheme: dark) {
:root {
--nav-bg: rgb(31, 44, 52);
--text-color: rgb(9, 148, 115);
}
}
<header>
<span>Whatsapp</span>
</header>
<nav>
<div class="nav-item active">hello 1</div>
<div class="nav-item">hello 2</div>
<div class="nav-item">hello 3</div>
<div class="nav-item">hello 4</div>
<div class="nav-item">hello 5</div>
</nav>
<div id="container">
<!-- 1 -->
<section>
<h1>PAGE 1</h1>
<p>
<!-- see the fifth for the longest paragraph -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
</p>
</section>
<!-- 2 -->
<section>
<h1>PAGE 2</h1>
<p>
Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
</p>
</section>
<!-- 3 -->
<section>
<h1>PAGE 3</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 4 -->
<section>
<h1>PAGE 4</h1>
<p>
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
</p>
</section>
<!-- 5 -->
<section>
<h1>PAGE 5</h1>
<p>
<!-- this is very long for a reason -->
Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
</p>
</section>
</div>
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
I want to ask about javascript. I want to create a social media share floating panel. I have made the code like below, but the panel is not working properly.
When the panel is closed, it displays the share icon. but there, it displays the close icon. Previously, this code was intended for panels that were already open first. But I want the panel not to open, but closed. So I removed the open class in <div class="panel-socmed">. But what happened, it became messy. And i want when scrolling at the top, panel doesnt open.
Anyone can help me?
function toggleMenu() {
if ($(".panel-socmed").hasClass("open")) {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(".panel-socmed").removeClass("open");
$("#closeShare").find(".fa-times").hide();
$("#closeShare").find(".fa-share-alt").show();
}
function closeMenu() {
$(".panel-socmed").addClass("open");
$("#closeShare").find(".fa-times").show();
$("#closeShare").find(".fa-share-alt").hide();
}
$(document).ready(function() {
$('#closeShare').click(function() {
toggleMenu();
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
openMenu();
} else{
closeMenu();
}
if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
$("#toTop").css("display","block");
} else {
$("#toTop").css("display","none");
}
});
});
body{
background-color:#c4c4c4;
}
#floatingPanel{
position: fixed;
z-index: 9;
bottom: 0;
right: 3%;
text-align: center;
}
.instagram{
background-color: #BC2A95;
}
.facebook{
background-color:#3F7BDB;
}
.twitter{
background-color: #5EB7F8;
}
.youtube{
background-color: #D84B4B;
}
.linkedin{
background-color: #3A66B9;
}
.instagram, .facebook, .twitter, .youtube, .linkedin {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width:35px;
height:35px;
border-radius: 50%;
margin: 5px 0;
font-size: 13px;
text-decoration: none !important;
outline: none;
}
#socialMedia,#closeShare,#chat,#toTop{
margin: 15px 0;
}
#closeShare{
cursor: pointer;
display: flex;
align-items:center;
justify-content:center;
background:red;
width:40px;
height:40px;
border-radius:50%;
}
#closeShare .fa-share-alt{
display: none;
}
#toTop{
background-color:blue;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.panel-socmed {
display:none;
}
.panel-socmed.open{
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px 15px;
border-radius: 35px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>
<div id="floatingPanel">
<div class="panel-socmed">
<a href="#" class="instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="youtube">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<div id="closeShare">
<!-- <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
<img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
<i class="fas fa-times"></i>
<i class="fas fa-share-alt"></i>
</div>
<div id="toTop">
<i class="fas fa-chevron-up"></i>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
</p>
</div>
The problem is your #closeShare .fa-share-alt has display: none; so the close icon show at start. Just change:
#closeShare .fa-share-alt {
display: none;
}
To:
#closeShare .fa-times {
display: none;
}
Then it will work as expected.
function toggleMenu() {
if ($(".panel-socmed").hasClass("open")) {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(".panel-socmed").removeClass("open");
$("#closeShare").find(".fa-times").hide();
$("#closeShare").find(".fa-share-alt").show();
}
function closeMenu() {
$(".panel-socmed").addClass("open");
$("#closeShare").find(".fa-times").show();
$("#closeShare").find(".fa-share-alt").hide();
}
$(document).ready(function() {
$('#closeShare').click(function() {
toggleMenu();
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
openMenu();
} else{
closeMenu();
}
if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
$("#toTop").css("display","block");
} else {
$("#toTop").css("display","none");
}
});
$(window).trigger('scroll');
});
body{
background-color:#c4c4c4;
}
#floatingPanel{
position: fixed;
z-index: 9;
bottom: 0;
right: 3%;
text-align: center;
}
.instagram{
background-color: #BC2A95;
}
.facebook{
background-color:#3F7BDB;
}
.twitter{
background-color: #5EB7F8;
}
.youtube{
background-color: #D84B4B;
}
.linkedin{
background-color: #3A66B9;
}
.instagram, .facebook, .twitter, .youtube, .linkedin {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width:35px;
height:35px;
border-radius: 50%;
margin: 5px 0;
font-size: 13px;
text-decoration: none !important;
outline: none;
}
#socialMedia,#closeShare,#chat,#toTop{
margin: 15px 0;
}
#closeShare{
cursor: pointer;
display: flex;
align-items:center;
justify-content:center;
background:red;
width:40px;
height:40px;
border-radius:50%;
}
#closeShare .fa-times {
display: none;
}
#toTop{
background-color:blue;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.panel-socmed {
display:none;
}
.panel-socmed.open{
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px 15px;
border-radius: 35px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>
<div id="floatingPanel">
<div class="panel-socmed">
<a href="#" class="instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="youtube">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<div id="closeShare">
<!-- <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
<img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
<i class="fas fa-times"></i>
<i class="fas fa-share-alt"></i>
</div>
<div id="toTop">
<i class="fas fa-chevron-up"></i>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
</p>
</div>
I was looking to trigger different buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
I have tried a lot until now but nothing runs properly.
For the first section (blue) everything looks great.
but when I tried to trigger the second section, nothing work.
I was wondering what I have to modify in my Javascript code to make my snippet work.
Any ideas?
Here my fiddle:
https://jsfiddle.net/CAT999/48rd76mp/3/
const btn = document.querySelector('.btn-a');
const overlay = document.querySelector('.overlay');
function openModal() {
overlay.classList.add('overlay--open');
}
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
btn.addEventListener('click', openModal, false);
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
display:inlne-block;
background: #1e90ff;
color: #fff;
line-height: 1.5;
padding: 30px;
}
.red{ background: red;}
/* Button */
.uno {
display: inline-block;
height:40px;
background: #ff6347;
position: sticky;
bottom: 30px;
right:20px;
}
.btn-a {
border: none;
border-radius: 4px;
color: #fff;
background-color: #222;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-a:active {
transform: scale(0.9);
}
.btn-b {
border: none;
border-radius: 4px;
color: red;
background-color:yellow;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-b:active {
transform: scale(0.9);
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: absolute;
width: 100%;
margin: 45vh auto 0;
padding: 25px;
border-radius: 5px;
box-shadow: 0 5px 12px rgba(15, 27, 39, .3);
background: #fff;
color:black;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 45px;
}
<!--SECTION-1-->
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-a'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-1-->
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-b'>Open Modal due</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-2-->
<section class="red">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
</section>
when you use document.querySelector('btn-a') you select only the button for the first modal. So ofcourse it won't work for the second one too.
I suggest you use a common class for the buttons ( modal-btn in my example ).
Select them with querySelectorAll which returns a NodeList with all the nodes with class modal-btn.
Loop over the NodeList with forEach so you can select each button. Then, on click on the button select the corresponding overlay using nextElementSibling.
P.S. My suggestion is to use just 1 overlay not overlays for each modal.
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
display:inlne-block;
background: #1e90ff;
color: #fff;
line-height: 1.5;
padding: 30px;
}
.red{ background: red;}
/* Button */
.uno {
display: inline-block;
height:40px;
background: #ff6347;
position: sticky;
bottom: 30px;
right:20px;
}
.btn-a {
border: none;
border-radius: 4px;
color: #fff;
background-color: #222;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-a:active {
transform: scale(0.9);
}
.btn-b {
border: none;
border-radius: 4px;
color: red;
background-color:yellow;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
}
.btn-b:active {
transform: scale(0.9);
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: absolute;
width: 100%;
margin: 45vh auto 0;
padding: 25px;
border-radius: 5px;
box-shadow: 0 5px 12px rgba(15, 27, 39, .3);
background: #fff;
color:black;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 45px;
}
<!--SECTION-1-->
<section>
<p>
</p>
<div class="uno">
<!--MODAL-1-->
<button class='btn-a modal-btn'>Open Modal uno</button>
<div class="overlay">
<div class="modal">
<span>Title Description-1👋 🌎</span>
</div>
</div>
<!--MODAL-1-->
</div>
</section>
<!--SECTION-1-->
<section>
<p>
</p>
<div class="uno">
<!--MODAL-2-->
<button class='btn-b modal-btn'>Open Modal due</button>
<div class="overlay">
<div class="modal">
<span>Title Description-2👋 🌎</span>
</div>
</div>
<!--MODAL-2-->
</div>
</section>
<!--SECTION-2-->
Your problem is document.querySelector('.overlay') only selects the first instance it finds of the class overlay.
If you want different overlays on the same page you need to relate the button to it's relative overlay (most likely using ids)
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>