skip to Main Content

Css – Why my sticky position don't work like it should be?

<div className="bg-yellow-200 z-10 "> <div className="flex flex-row h-[1000px] "> <div className="flex flex-col gap-4 w-1/2"> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> <div className="h-40 w-96 bg-green-200"></div> </div> <div className="w-1/2 bg-blue-400 z-50"> <div className="sticky top-0 left-0 right-0 w-40 h-40 bg-red-500 z-50">…

VIEW QUESTION

Javascript – Implementing a sticky titles feature

I am trying to implement a sticky titles feature, and I think I am getting too complicated. This is where I am right now: class StickyTitles { constructor(titlesSelector, containerSelector, distanceFromTopDetection) { this.titles = Array.from(document.querySelectorAll(titlesSelector)); this.container = document.querySelector(containerSelector); // Security buffer…

VIEW QUESTION

Html – CSS sticky cards using grid layout

I want to have a layout of sticky cards using grid layout. This is what I managed to achieve: <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> :root { --card-top-offset: 3rem; --card-h: 36rem; } .cards…

VIEW QUESTION
Back To Top
Search