I have an element that has position sticky and has the top property set to 30px. I want it so that when the element becomes stuck (so to say) It has a class of stuck added to it. I'm aware…
<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">…
I have that problem, that on my header the box shadow isn't visible because my navigation content lays on top of it, event though my header has a higher z-index. I cant't see what exactly is the issue here, shouldn't…
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…
I read a lot about position: sticky in CSS. And I know, it does not work with overflow: hidden and display: flex. But I want to stick a button on top, that is positioned on the right of another element.…
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…
In this example the inner grey div should be behaving like a sticky div - so it sticks to the top of the screen when you scroll down the page - but that ain't happening! What have I got wrong?…
I've created a custom element that mimics c#’s datagridview. I was able to make the <thead> stick at the top like dot net’s listview or datagridview header until just recently I noticed it doesn’t work anymore. Everything in this custom…
In the table, the first column indicates the position 'sticky', which opens a drop-down menu position: absolute. But the subsequent column overlaps the menu that opens. /* Dropdown Button */ .dropbtn { background-color: #04aa6d; color: white; padding: 16px; font-size: 16px;…
I'm attempting a scenario where one header will be sticky, followed by a subheader which is sticky, and then followed by a table header. In this setup, I want the .first class to become sticky upon scrolling, the .second class…