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 built a website where every page scrolls very smooth with parrallax, except for the home page.
The used code is the same, so I don't get why it differs so much.
I tried everything, but don't know why it keeps happening.
Necessary code below. Live preview: https://www.watwiljij.nu
CSS
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: none;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
Javascript
if ($(window).width() > 800){
window.addEventListener('scroll', () => {
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
// document.getElementById("illustrationContainer").style.transform = 'translateY('+ window.pageYOffset* 1 + 'px)';
for(let i = 0; i < children.length; i++) {
// children[i].style.transform = 'translateY(' + (window.pageYOffset / (2 + 0.3*i) * children.length / 32) + 'px)';
children[i].style.transform = 'translateY(' + (window.pageYOffset - ((window.pageYOffset / i)/5)) + 'px)';
}
}, false);
}
You can try this code but I am not sure why you are not using css transition. Without transition, your css transformY will flicker or you can use any JS library for this kind of effect.
window.addEventListener('scroll', () => {
const distance = window.pageYOffset;
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
for(let i = 0; i < children.length; i++) {
children[i].style.transform = `translateY(${distance * 1}px)`;
}
}, false);
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: transform .1s linear;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
<!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>Document</title>
</head>
<body>
<div id="illustrationContainer">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="opacity: 0;">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration1" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Square.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration2" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Mountains.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration3" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Man.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration4" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Splashes.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Plane.svg" style="transform: translateY(0px);">
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?
</body>
</html>
I have a button that you click on and a div appears.
If you'll scroll down from an iPhone you'll see that it's not scrolling smoothly as it should. for some reason it's losing that behavior and I don't know why.
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>
Try adding this css.
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I've this code :
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header span').animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur
sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo.
Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate
fugit.</div>
</main>
When I scroll, the <span>Test</span> appears from top to bottom as I want.
But when I scroll to the top of the page, I want that span to move from bottom to top like its initial state.
Thanks for your help !
You have to stop the currently-running animation on the matched elements.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header span').stop().animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').stop().animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo. Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate fugit.</div>
</main>
I hear that you can't set the height to auto, initial, or inherit for the end of an animation. so how would you set the height to the content's height? In my example the ending height is 500 but I want the height to be whatever the content is.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
$(this).toggleClass("open")
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
max-height: 200px;
overflow: hidden;
transition: max-height .5s;
}
.area.open{
max-height: 500px;
/* max-height: initial;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>
Instead of using css transition I have used animate of jquery. Here height is toggled between preset value 200px and auto.
$(function(){
console.log($(".area").height())
$(".area").on("click", function(){
if(!$(this).hasClass('open')) {
$(this).addClass('open');
var currHt = $(this).height();
var autoHt = $(this).css("height","auto").height();
$(this).css("height",currHt+"px").animate({height: autoHt+"px"}, 500);
} else {
$(this).removeClass('open')
$(this).animate({height: "200px"}, 500);
}
})
})
.area{
background: limegreen;
width: 50%;
margin: 0 auto;
height: 200px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab,
</div>