PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

How to Detect When a Sticky Element Gets Pinned

November 10, 2020
in Web Dev
289 3
How to Detect When a Sticky Element Gets Pinned

The need for position: sticky was around for years before it was implemented natively, and I can boast that I implemented it with JavaScript and scroll events for ages. Eventually we got position: sticky, and it works well from a visual perspective, but I wondered how can we determine when the element actually became pinned due to scroll.

We can determine if an element has become sticky thanks to the IntersectionObserver API!

Pinning an element to the top of its container is as easy as one CSS directive:

.myElement {
  position: sticky;
}

The question still remains about how we can detect an element being pinned. Ideally there would be a :stuck CSS directive we could use, but instead the best we can do is applying a CSS class when the element becomes sticky using a CSS trick and some JavaScript magic:

.myElement {
  position: sticky;
  /* use "top" to provide threshold for hitting top of parent */
  top: -1px;
}

.is-pinned {
  color: red;
}
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio 



As soon as myElement becomes stuck or unstuck, the is-pinned class is applied or removed. Check out this demo:

See the Pen WNwVXKx by David Walsh (@darkwing) on CodePen.

While there's not too much JavaScript involved, I hope we eventually get a CSS pseudo-class for this. Something like :sticky, :stuck, or :pinned seems as reasonable as :hover and :focus do.

Website performance monitoring
Website performance monitoring


Source link
Share219Tweet137Share55Pin49

Related Posts

Web Dev

Cookie Consent For Designers And Developers — Smashing Magazine

As digital practitioners, GDPR has impacted every facet of our professional and personal lives. Whether you’re addicted to Instagram,...

March 1, 2021
Free Early Bird Registration for SPOTcon 2021 Now Open
Web Dev

Free Early Bird Registration for SPOTcon 2021 Now Open

SPOTcon 2021 is the latest digital conference for developers from around the world to meet, engage with, and learn...

March 1, 2021
Next.js on Netlify
Web Dev

Next.js on Netlify

(This is a sponsored post.) If you want to put Next.js on Netlify, here’s a 5 minute tutorial¹. One...

February 28, 2021
Web Dev

Fresh Inspiration For March And A Smashing Winner (2021 Wallpapers Edition) — Smashing Magazine

Our wallpapers post this month is a special one: There’s not only a new collection of wallpapers created by...

February 28, 2021
Next Post
A Beautiful and Minimal Open Source Mobile OS

A Beautiful and Minimal Open Source Mobile OS

4 Lessons Web App Designers Can Learn From Google — Smashing Magazine

Best Practices For E-Commerce UI Design — Smashing Magazine

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Welcome to the new Laravel News

Welcome to the new Laravel News

February 13, 2021
Auto-growing inputs

Auto-growing inputs

May 25, 2020
Automated CloudFormation Testing Pipeline with TaskCat and CodePipeline : idk.dev

Automated CloudFormation Testing Pipeline with TaskCat and CodePipeline : idk.dev

September 4, 2020
How to Install & Use It on Ubuntu

How to Install & Use It on Ubuntu

June 1, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In