Related
I'm trying to clone the AirBnB website and I'm having a problem with the detail page reservation Box. the thing is that when we scroll from top the element will be scrollable until it's totally in viewport. after it become all visible it will stay fixed and the components next to it are scrollable. and finally when the viewport reaches certain point in the scroll it will be scrollable again.
AirBnB detail Page
so how can i make this happen? I'm using NextJS 13 and tailwindCss.
function DetailSection({ home }) {
return (
<div className="pt-5 flex justify-between">
<div className="drop-shadow-md">
<h1 className="text-lg font-light tracking-wide">{home.name}</h1>
<h2 className="font-thin tracking-wide text-sm">
4 bedroom <span>|</span> 2 bathroom <span>|</span> 200 sqm
</h2>
</div>
<div className="w-2/6 h-72 fixed bottom-0 right-0 bg-red-300">the fixed element </div>
</div>
);
}
I've made the following progress so far. but when the element become active again it doesn't proceed from the position it currently is rather it will pop to it's original position.
function StickySide() {
const [stick, setStick] = useState(false);
function setSidebarFixed() {
if (window.scrollY >= 210 && window.scrollY < 600) {
setStick(true);
} else {
setStick(false);
}
}
window.addEventListener("scroll", setSidebarFixed);
return (
<div
className={`${
stick ? "fixed bottom-10 right-20" : "relative"
} w-72 h-72 bg-red-300`}
>
next
</div>
);
}
Remove temp content. I added It just for illustrating purpose.
<main>
<section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
upper content -- Images Etc -<br /> I gave styles to this element for
temporary purposes. You will need to remove them and add your own
content
</section>
{/* Your required section goes here */}
<section className="border-2 border-black min-h-[60vh] relative flex">
<div className="left-side-content w-8/12">
{/* left side Content */}
<h1 className="text-3xl font-bold">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,
quisquam? Error dolore tenetur architecto consequuntur.
</h1>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<h2 className="text-2xl font-bold">Some Features</h2>
<ul>
<li>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Voluptas, enim?
</li>
<li>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Reprehenderit, fugiat?
</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
veniam!
</li>
<li>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores,
ex.
</li>
</ul>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
<p className="">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
officiis maiores consequatur aliquid beatae quam unde ducimus earum
inventore? Natus vero ducimus veritatis consequatur magnam beatae
nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
non, repellat in dolorum commodi tempora magnam nisi tempore nulla
odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
consequuntur inventore eaque. Veniam ducimus, similique numquam
deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
doloremque rerum. In sunt, beatae porro voluptatibus corrupti
exercitationem!
</p>
</div>
{/* right side content */}
<section className="sticky top-16 h-96 bg-blue-400 border-2 w-4/12">
<h1 className="text-2xl text-white">Right Side Content</h1>
</section>
</section>
{/* Your required section end here */}
{/* temp content */}
<section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
bottom content Section 1 - I gave styles to this element for temporary
purposes. You will need to remove them and add your own content
</section>
<section className="bg-green-200 h-80 flex justify-center items-center text-black text-xl ">
bottom content Section 2
</section>
<section className="bg-red-200 h-80 flex justify-center items-center text-black text-xl ">
bottom content Section 3
</section>
</main>
You have to make that element sticky and give position from top.
Make parent section relative. And give this child section (sidebar) sticky position and give it some position from top.
I've this code in the snippet. It's an intersection Observer that tracks visible headers and adds an "active" class to the corresponding anchor tag in the top nav.
I would like to know if it's possible for the 'li' element with class "active" to also be scrolled into view.
I have tried a mutationObserver but I can't seem to make it work by any means.
Thanks!
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.add('active');
} else {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('h2[id]').forEach((h2) => {
observer.observe(h2);
});
});
.table_of_content li{
display:inline-flex;
margin-right: 20px;
border-right: 2px solid black;
padding-right:15px;
}
.table_of_content {
border-left:none;
z-index:1000;
position: sticky;
background-color:white;
top: -1px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.table_of_content ul {
margin: 0 auto;
padding: 15px 0;
}
.table_of_content li.active > a {
color:#ff9900;
border-radius:5px;
text-decoration:underline;
}
.section {
max-width: 400px;
}
<div class="section">
<div id="navigation12" class="table_of_content">
<ul>
<li><span>In this article</span></li>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
<li>Heading 4</li>
<li>Heading 5</li>
<li>Heading 6</li>
<li>Heading 7</li>
<li>Heading 8</li>
</ul>
</div>
<h2 id="header1">Header 1</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex. Eaque laboriosam fugiat debitis quisquam maiores ipsa aspernatur quam provident tenetur! Ipsa possimus illum provident. Quam, quaerat cum? Earum, reiciendis!
<h2 id="header2">Header 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia neque, repudiandae minus sit ratione expedita debitis hic sequi recusandae repellat? Eligendi, reiciendis voluptatem. Quidem tempore cupiditate obcaecati rem omnis quis commodi, rerum in delectus beatae eius nulla? Harum laborum, obcaecati ipsa officiis velit voluptatibus alias facilis at recusandae dolores molestias, autem quas. Repellendus ducimus soluta culpa dicta vel eveniet recusandae beatae odit id exercitationem ratione, nemo inventore, unde dolores eligendi quasi pariatur rem labore? Labore eum doloremque non illo, autem optio, excepturi ad quis reiciendis exercitationem necessitatibus fugit? Repellendus dolore ea magnam tempora in corporis sed totam et suscipit! Nihil?
<h2 id="header3">Header 3</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis, eligendi odit quam necessitatibus enim alias perferendis ut maxime quod quae ipsam minima voluptates voluptatibus at nobis, esse sequi beatae dolor quis. Quia officiis consequuntur, delectus dolore temporibus reprehenderit reiciendis sunt perspiciatis aspernatur, facere veniam. Ad corporis a voluptate provident soluta eveniet? Sunt est deserunt amet assumenda iste odit ad placeat! Vitae aliquam aliquid, molestiae cum aut unde velit laboriosam, perferendis rem asperiores pariatur quam optio quo nostrum saepe quia id dignissimos, consequatur molestias sed nulla ipsum? Molestias ab sapiente dolores ut. Dolor vero quod, distinctio laborum expedita incidunt repudiandae.
<h2 id="header4">Header 4</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur, harum doloribus nisi vitae odit non deserunt et veritatis modi maxime repudiandae quasi cum eveniet inventore, fuga similique accusamus ad magnam alias qui optio delectus provident. Asperiores labore molestias quod laborum quasi sequi suscipit, optio tenetur esse soluta debitis eaque, doloribus reiciendis voluptatum iure dolorum quibusdam vel nihil quo ratione cupiditate necessitatibus aliquid obcaecati totam. Deserunt laudantium officiis et? Quas doloribus ipsum nam similique libero velit, tempora, delectus exercitationem cumque autem in iste, perspiciatis repudiandae a aliquid nobis ut voluptate corrupti unde recusandae voluptas rem aut nisi quam. Inventore, dolor.
<h2 id="header5">Header 5</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo, numquam aliquam minus eveniet vero neque ratione quidem voluptatem ipsa officiis soluta beatae dicta eligendi quo, nemo quaerat atque mollitia! Vitae mollitia voluptatum natus iusto eum quis debitis, similique illo, libero necessitatibus illum provident ad inventore sed consectetur molestias ipsa impedit obcaecati cumque et. Eveniet, molestiae deserunt rem earum dolor neque animi dignissimos dolore atque provident at numquam repellendus aliquam adipisci officia maxime fuga unde reiciendis saepe, sint culpa recusandae. At neque sapiente mollitia doloremque, architecto voluptatem delectus nulla laboriosam dicta quo animi magnam nisi in? Voluptatum harum et est!
<h2 id="header6">Header 6</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis distinctio nesciunt ut similique dicta cum est quis soluta harum quam, dolorem sequi repellat, atque provident eius. Atque ea quibusdam quo! Rem nihil pariatur ex magni odio modi sed unde quidem laboriosam doloremque repellat quo eum nemo eaque mollitia adipisci exercitationem ipsam blanditiis, consectetur atque libero totam quaerat officia soluta? Cum ipsam a incidunt cumque earum quod ea quibusdam vel ratione? Minima, id voluptate! Minima cumque quisquam, quod blanditiis quas et est laudantium placeat explicabo, dolorum velit, facilis cupiditate aspernatur nostrum dicta voluptatem adipisci suscipit debitis enim ullam commodi? Magni, consequatur.
<h2 id="header7">Header 7</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis alias soluta qui accusantium in repellendus, doloremque ullam quis esse optio veniam fugit doloribus mollitia ea, dolorum rem. Unde, adipisci. Totam vel harum maiores illo nobis culpa labore corrupti quasi atque consequuntur, minus odio deleniti iure, ab natus aliquam consectetur asperiores quia eveniet dolorem similique dolore eos quisquam. Quis, ipsam corrupti? Atque molestiae omnis asperiores dolores eos obcaecati aspernatur, recusandae eaque numquam consectetur aut corporis vitae dignissimos et ipsum eum odit id incidunt voluptate perferendis! Saepe tempora iste aspernatur enim quidem labore voluptatem id dolor quam esse! Quibusdam reiciendis inventore hic!
<h2 id="header8">Header 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est amet inventore quae eveniet sequi unde! Consequatur necessitatibus minima molestias quia vero recusandae unde veniam nobis qui saepe minus culpa ab rem aspernatur officiis earum et doloribus, provident eius asperiores. Harum consectetur odio blanditiis, sunt rerum necessitatibus exercitationem vero dolorem rem, cupiditate pariatur officiis repudiandae deserunt modi sequi aspernatur ratione libero perspiciatis illo cum saepe debitis tempora sapiente! Possimus modi nostrum ipsum placeat nam praesentium quos vero in, non dolor debitis dolorum nobis cum natus obcaecati, soluta reprehenderit sapiente. Eius ducimus placeat numquam incidunt magni repudiandae accusantium quasi alias vitae vero!
</div>
All you have to do is make add a line to your script.
When you add class "active" to active li element, make the a tag scroll into the view, like so
window.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const id = entry.target.getAttribute("id");
if (entry.intersectionRatio > 0) {
document
.querySelector(`ul li a[href="#${id}"]`)
.parentElement.classList.add("active");
// The following line scrolls the active "li" element into view
document.querySelector(`ul li a[href="#${id}"]`).scrollIntoView();
} else {
document
.querySelector(`ul li a[href="#${id}"]`)
.parentElement.classList.remove("active");
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll("h2[id]").forEach((h2) => {
observer.observe(h2);
});
});
Hope it helps.
I modified your code just a bit to get this working. The important part is where you add the active class to your current active element: currentActiveElement.scrollIntoView()
This ensures, that the current element with the active class is always scrolled into the view.
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
let currentActiveElement = document.querySelector(`ul li a[href="#${id}"]`);
currentActiveElement.parentElement.classList.add('active');
currentActiveElement.scrollIntoView();
} else {
document.querySelector(`ul li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('h2[id]').forEach((h2) => {
observer.observe(h2);
});
});
.table_of_content li{
display:inline-flex;
margin-right: 20px;
border-right: 2px solid black;
padding-right:15px;
}
.table_of_content {
border-left:none;
z-index:1000;
position: sticky;
background-color:white;
top: -1px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.table_of_content ul {
margin: 0 auto;
padding: 15px 0;
}
.table_of_content li.active > a {
color:#ff9900;
border-radius:5px;
text-decoration:underline;
}
.section {
max-width: 400px;
}
<div class="section">
<div id="navigation12" class="table_of_content">
<ul>
<li><span>In this article</span></li>
<li>Heading 1</li>
<li>Heading 2</li>
<li>Heading 3</li>
<li>Heading 4</li>
<li>Heading 5</li>
<li>Heading 6</li>
<li>Heading 7</li>
<li>Heading 8</li>
</ul>
</div>
<h2 id="header1">Header 1</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex. Eaque laboriosam fugiat debitis quisquam maiores ipsa aspernatur quam provident tenetur! Ipsa possimus illum provident. Quam, quaerat cum? Earum, reiciendis!
<h2 id="header2">Header 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia neque, repudiandae minus sit ratione expedita debitis hic sequi recusandae repellat? Eligendi, reiciendis voluptatem. Quidem tempore cupiditate obcaecati rem omnis quis commodi, rerum in delectus beatae eius nulla? Harum laborum, obcaecati ipsa officiis velit voluptatibus alias facilis at recusandae dolores molestias, autem quas. Repellendus ducimus soluta culpa dicta vel eveniet recusandae beatae odit id exercitationem ratione, nemo inventore, unde dolores eligendi quasi pariatur rem labore? Labore eum doloremque non illo, autem optio, excepturi ad quis reiciendis exercitationem necessitatibus fugit? Repellendus dolore ea magnam tempora in corporis sed totam et suscipit! Nihil?
<h2 id="header3">Header 3</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis, eligendi odit quam necessitatibus enim alias perferendis ut maxime quod quae ipsam minima voluptates voluptatibus at nobis, esse sequi beatae dolor quis. Quia officiis consequuntur, delectus dolore temporibus reprehenderit reiciendis sunt perspiciatis aspernatur, facere veniam. Ad corporis a voluptate provident soluta eveniet? Sunt est deserunt amet assumenda iste odit ad placeat! Vitae aliquam aliquid, molestiae cum aut unde velit laboriosam, perferendis rem asperiores pariatur quam optio quo nostrum saepe quia id dignissimos, consequatur molestias sed nulla ipsum? Molestias ab sapiente dolores ut. Dolor vero quod, distinctio laborum expedita incidunt repudiandae.
<h2 id="header4">Header 4</h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur, harum doloribus nisi vitae odit non deserunt et veritatis modi maxime repudiandae quasi cum eveniet inventore, fuga similique accusamus ad magnam alias qui optio delectus provident. Asperiores labore molestias quod laborum quasi sequi suscipit, optio tenetur esse soluta debitis eaque, doloribus reiciendis voluptatum iure dolorum quibusdam vel nihil quo ratione cupiditate necessitatibus aliquid obcaecati totam. Deserunt laudantium officiis et? Quas doloribus ipsum nam similique libero velit, tempora, delectus exercitationem cumque autem in iste, perspiciatis repudiandae a aliquid nobis ut voluptate corrupti unde recusandae voluptas rem aut nisi quam. Inventore, dolor.
<h2 id="header5">Header 5</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo, numquam aliquam minus eveniet vero neque ratione quidem voluptatem ipsa officiis soluta beatae dicta eligendi quo, nemo quaerat atque mollitia! Vitae mollitia voluptatum natus iusto eum quis debitis, similique illo, libero necessitatibus illum provident ad inventore sed consectetur molestias ipsa impedit obcaecati cumque et. Eveniet, molestiae deserunt rem earum dolor neque animi dignissimos dolore atque provident at numquam repellendus aliquam adipisci officia maxime fuga unde reiciendis saepe, sint culpa recusandae. At neque sapiente mollitia doloremque, architecto voluptatem delectus nulla laboriosam dicta quo animi magnam nisi in? Voluptatum harum et est!
<h2 id="header6">Header 6</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis distinctio nesciunt ut similique dicta cum est quis soluta harum quam, dolorem sequi repellat, atque provident eius. Atque ea quibusdam quo! Rem nihil pariatur ex magni odio modi sed unde quidem laboriosam doloremque repellat quo eum nemo eaque mollitia adipisci exercitationem ipsam blanditiis, consectetur atque libero totam quaerat officia soluta? Cum ipsam a incidunt cumque earum quod ea quibusdam vel ratione? Minima, id voluptate! Minima cumque quisquam, quod blanditiis quas et est laudantium placeat explicabo, dolorum velit, facilis cupiditate aspernatur nostrum dicta voluptatem adipisci suscipit debitis enim ullam commodi? Magni, consequatur.
<h2 id="header7">Header 7</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis alias soluta qui accusantium in repellendus, doloremque ullam quis esse optio veniam fugit doloribus mollitia ea, dolorum rem. Unde, adipisci. Totam vel harum maiores illo nobis culpa labore corrupti quasi atque consequuntur, minus odio deleniti iure, ab natus aliquam consectetur asperiores quia eveniet dolorem similique dolore eos quisquam. Quis, ipsam corrupti? Atque molestiae omnis asperiores dolores eos obcaecati aspernatur, recusandae eaque numquam consectetur aut corporis vitae dignissimos et ipsum eum odit id incidunt voluptate perferendis! Saepe tempora iste aspernatur enim quidem labore voluptatem id dolor quam esse! Quibusdam reiciendis inventore hic!
<h2 id="header8">Header 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est amet inventore quae eveniet sequi unde! Consequatur necessitatibus minima molestias quia vero recusandae unde veniam nobis qui saepe minus culpa ab rem aspernatur officiis earum et doloribus, provident eius asperiores. Harum consectetur odio blanditiis, sunt rerum necessitatibus exercitationem vero dolorem rem, cupiditate pariatur officiis repudiandae deserunt modi sequi aspernatur ratione libero perspiciatis illo cum saepe debitis tempora sapiente! Possimus modi nostrum ipsum placeat nam praesentium quos vero in, non dolor debitis dolorum nobis cum natus obcaecati, soluta reprehenderit sapiente. Eius ducimus placeat numquam incidunt magni repudiandae accusantium quasi alias vitae vero!
</div>
This question already has answers here:
Fixed position element inside div container only
(2 answers)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
Following is the code where I want the panel-right to be at the fix position similar to position: relative but the problem is when I change position: relative to position: fixed it moves to the right side and left container takes full width of the panel-container whereas I want the same layout as in position: relative but as soon as I scroll the page only panel-right will fixed at its position and UI though remains the same.
Code -
* { box-sizing: border-box; }
body { background: #c3c3c3; }
.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }
.panel-container {
max-width: 400px;
margin: 0 auto;
outline: 1px solid #000;
display: flex;
align-items: flex-start;
}
.panel-right {
border: 1px solid green;
/* position: fixed; */
position: relative;
right: 0;
}
<div class="container">
<div class="page-title">
<h3 class="title">This is my Page Heading</h3>
</div>
<hr />
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
</p>
</div>
<hr />
<div class="panel-container">
<div class="panel-left">
<p class="green">
<h3>LEFT CONTAINER</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
</p>
<p class="blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
<p class="teal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
</p>
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
</p>
</div>
<div class="panel-right">
<ul>
<li>RIGHT CONTAINER</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
dscdsfs
* { box-sizing: border-box; }
body { background: #c3c3c3; }
.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }
.panel-container {
max-width: 400px;
margin: 0 auto;
outline: 1px solid #000;
display: flex;
align-items: flex-start;
}
.panel-right {
border: 1px solid green;
/* position: fixed; */
position: sticky; /* new stuff */
top: 0; /* new stuff */
right: 0;
}
<div class="container">
<div class="page-title">
<h3 class="title">This is my Page Heading</h3>
</div>
<hr />
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
</p>
</div>
<hr />
<div class="panel-container">
<div class="panel-left">
<p class="green">
<h3>LEFT CONTAINER</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
</p>
<p class="blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
<p class="teal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
</p>
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
</p>
</div>
<div class="panel-right">
<ul>
<li>RIGHT CONTAINER</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video
Link to Code
Link to Site
https://jsfiddle.net/1L5emghf/
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)
Full solution with JS
https://jsfiddle.net/1L5emghf/1/
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
Since all the paragraphs are using relative positions, you can set max-width / overflow-y styles for them :
CSS
p { max-height: 154px; overflow-y: scroll; }
Inline Styles
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
Incase paragraph widths are also being affected, add max-width: 483px; overflow-x: hidden; properties
I have the follow HTML and js code snippets make using the UIKIT css framework,
I'm trying to hide left side sticky div on reaching the parallax div container.
Codepen link
I tried to the following js code for this purpose but I've been unable to do so.
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('side-content').style.display='none';
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum. A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse, mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium unde laboriosam deserunt.
</div>
</div>
</div>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>
I would be very helpful if anyone could suggest how can hide the div.
Adding this function will get you the exact element position so you can adjust your code accordingly.
document.onscroll = function() {
var div = document.getElementsByClassName("uk-height-large");
var divOffset = offset(div[0]);
if (window.innerHeight + window.scrollY > divOffset.top + 250) {
document.getElementById('side-content').style.display='none';
}
else{
document.getElementById('side-content').style.display='block';
}
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
Use getBoundingClientRect on your parallax element.
The Element.getBoundingClientRect() method returns the size of an
element and its position relative to the viewport.
It returns an object with different properties, where one is "top". Simply subtract top by the window.innerHeight and if it's <= 0 then it has appeared in the view port.
let sideC = document.getElementById("side-content");
let paral = document.getElementById("parallax");
window.addEventListener("scroll", function() {
if(paral.getBoundingClientRect().top - window.innerHeight <= 0){
$(sideC).fadeOut(1000);
} else {
$(sideC).fadeIn(1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit
minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea
quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error
deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi
animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt
a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum.
A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est
officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt
in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio
minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam
ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque
odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse,
mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia
est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias
assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium
unde laboriosam deserunt.
</div>
</div>
</div>
<div id="parallax" class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>
You was almost there, the problem is that you need to take into account that document.body.clientHeight is the bottom of the page and what you are looking for is the element with the class "uk-background-primary" that corresponds to your footer.
Here it is the snippet:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.getElementsByClassName("uk-background-primary")[0].offsetTop) {
document.getElementById('side-content').style.display='none';
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum. A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse, mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium unde laboriosam deserunt.
</div>
</div>
</div>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>