Stickguy Posted October 15, 2020 Share Posted October 15, 2020 I have a series of divs that I am pinning to the top of the screen with Scrolltrigger. I have a title that scrolls on with one of the sections that I would like to pin in place so that it stays in place over the next few divs that scroll in. I have that setup but when the next div scrolls in it is still getting covered regardless of the z-index. Is there a way to ensure that the pinned title will stay on top of the divs that follow it? See the Pen yLJeGyZ by Stickguy (@Stickguy) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted October 15, 2020 Share Posted October 15, 2020 The thing here is that the title (Sticky Title, I'm assuming) is in a position:fixed inside a position:absolute inside a position:absolute inside a position:relative (etc.) ... anything but static. Each of these is squeezing the scope of z-index. If it has to be there from a markup standpoint, I would advise, once reached, you use a bit of DOM manipulation to break it free from the positioned parents and let it live closer to the surface of the overall parent container. 3 Link to comment Share on other sites More sharing options...
Stickguy Posted October 16, 2020 Author Share Posted October 16, 2020 Thanks! I was able to figure out a solution. See the Pen zYBryjq by Stickguy (@Stickguy) on CodePen 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now