Related
My aim is to have the images appear and slide horizontally in to place as I scroll down.
I have 4 floated images translated off the document and with opacity:0. I have tried to apply an intersersectionObserver to each of the images, but when I log the intersection ratio, it is under 0.1 for most of the images, even when they are fully within the viewport (I didn't set a root).
I tried to deal with this by tweaking the root margin, but that seemed to make no difference. My .active CSS class does get triggered for all of the images when I scroll down, but I don't know why. Also, the transition I set to my CSS classes seems not to be working.
I suspect I made a mistake in my use of intersectionObserver, but after reading the documentation, I cannot see where I have gone wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="site-wrap">
<h1>Slide in on Scroll</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<img src="http://unsplash.it/400/400" class= "slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
<img src="http://unsplash.it/400/401" class="slide-in">
<p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
<img src="http://unsplash.it/200/500" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
<p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<img src="http://unsplash.it/400/400" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
</div>
<script>
const myImages = document.querySelectorAll('img');
const myObserver = new IntersectionObserver(function(entries) {
if (myImages[0].isIntersecting) {
myImages[0].classList.add('align-left');
}
if (myImages[1].isIntersecting) {
myImages[1].classList.add('align-right')
// repeat the above for myImages[2] and myImages[3]
}
entries.forEach(e => {
console.log(e.intersectionRatio)
if (e.isIntersecting) {
console.log(e.target)
e.target.classList.remove('slide-in')
e.target.classList.add('active')
}
}),
{ threshold: 0.7,
rootMargin: "0px 200px 0px -200px"}
});
for (var e of myImages) {
myObserver.observe(e);
}
</script>
<style>
html {
box-sizing: border-box;
background: #ffc600;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
margin-top: 0;
}
.site-wrap {
max-width: 700px;
margin: 100px auto;
background: white;
padding: 40px;
text-align: justify;
}
.align-left {
float: left;
margin-right: 20px;
transition: all 0.5s;
}
.align-right {
float: right;
margin-left: 20px;
transition: all 0.5s;
}
.slide-in {
opacity: 0;
transition: all 0.5s;
}
.align-left.slide-in {
transform: translateX(-30%) scale(0.95);
transition: all 0.5s;
}
.align-right.slide-in {
transform: translateX(30%) scale(0.95);
transition: all 0.5s;
}
.slide-in.active {
opacity: 1;
transform: translateX(0%) scale(1);
transition: all 0.5s;
}
</style>
</body>
</html>
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>
I am a beginner in programming, I have a problem and want to ask you!
At present, there is a layout that the green area appears on the left side, such as area A in the picture, but when the mouse slides down, the green area is about to become area B in the picture.
But I don’t know how to make such a change, no Know if someone can give me a little help? thanks
* {
border: 1px solid #222;
}
html {
background-color: #ccc;
}
.content {
margin: auto;
display: flex;
justify-content: center;
max-width: 600px;
}
.content .main {
flex: 2;
background-color: #f80d77;
padding: 20px;
line-height: 1.6;
}
.content .main .title {
font-size: 60px;
height: 100px;
background-color: #71ff05;
margin-bottom: 20px;
padding: 10px;
}
.content .side {
flex: 1;
}
.content .side .side_wrap {
background-color: #ff5b0f;
padding: 20px;
}
<div class="warp">
<div class="content">
<div class="main">
<div class="title">TITLE</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia libero explicabo est hic illo! Beatae, optio molestiae, debitis itaque in ullam odio corporis neque delectus facilis nobis omnis. Cum voluptatem vel, accusantium repellendus consectetur facilis dolore possimus deleniti corporis placeat iure exercitationem fugiat repellat ipsa eaque? Quam alias, sit corporis earum doloremque eos et voluptatem tempora, similique mollitia pariatur suscipit porro reprehenderit ea ut in quidem! Deleniti soluta nostrum at quidem itaque, maxime enim sint sequi recusandae possimus dicta natus quo harum! Veniam ut dolorem, laboriosam mollitia ab quasi non ratione officia iure, nam, molestiae sunt pariatur explicabo cupiditate deserunt?
</div>
<div class="side">
<ul class="side_wrap">
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
</div>
</div>
</div>
Use position:sticky; with element.
You could use this as reference.
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 have a fixed top navbar that should slide up when the user scrolls past a certain point and be replaced with a slimmer navbar. I'm using velocity.js to animate the switch with .velocity("slideUp") / ("slideDown"). However, the animation doesn't stop looping. The switch works fine with jQuery slideUp() and slideDown() though.
Here's the velocity version:
var offsetPos = $( "h1" ).offset().top;
var navFull = $( ".navbar-full" );
var navShrink = $( ".navbar-shrink" );
navShrink.hide();
function navChange() {
var scrollPos = $( this ).scrollTop();
if ( scrollPos > offsetPos ) {
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
} else {
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
$( window ).on( "scroll", navChange );
html, body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea, eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti, quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>
And here it is working with jQuery:
CodePen
I've tried the stop() and stop(true,true) trick to no avail...
[Realise I didn't ask a question!]
So, my question is: Why does this work in jQuery and not Velocity? Is there a way to make the event fire only once, specifically, at the scroll position? - as it looks like it fires on all scroll events.
A caveat: I'm only a couple of months in to jQuery...
It doesn't exactly loop. It's just being executed a lot by the scrollEvent. jQuery is probably stateful, I'm not sure about velocity. You'll need a variable that checks if you are scrolled down enough and that it has already run once.
var offsetPos = $("h1").offset().top;
var navFull = $(".navbar-full");
var navShrink = $(".navbar-shrink");
navShrink.hide();
var animateUp = false;
var animateDown = true;
function navChange() {
var scrollPos = $(this).scrollTop();
if (scrollPos > offsetPos) {
if(animateUp === false){
animateDown = false;
animateUp = true;
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
}
} else {
if(animateDown == false){
animateUp = false;
animateDown = true;
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
}
$(window).on("scroll", navChange);
html,
body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non
fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores
voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam
corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore
quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea,
eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti,
quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores
culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati
qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi
dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias
ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis
similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>