system
March 11, 2022, 12:15pm
1
Hello guys, I need help, I have been wasting many hours with this but I can’t figure it out. So what I want to do is to hide a div on scroll.
here is the snippet of what I have done:
A Pen by Matteo (codepen.io)
I want to replicate the same thing directly on my Dawn Theme.
I have placed 3 rich text sections in a row.
Problem is the text remains sticked to the screen even if i set the z-index to -9999.
Look:
The rich text above has z-index of 10 with relative position. The one below has sticky position and z-index of 1.
When I scroll down it goes behind the first rich text but it remains over the rest of the website. I want it to be behind everything when I scroll up.
Any idea?
p.s.
I already tried setting different values of z-index
@Anonymous - can you share your site link? did you set height and background colors?
system
March 11, 2022, 12:37pm
3
Hi @suyash1
Thanks a ton for the answer!
I am just using a standard version of the Dawn Theme.
As per the background color and height, can you explain further?
Where do I need to set height and background color?
@Anonymous - please check entire codepen code you shared above, did you use all those properties for your sections?
system
March 11, 2022, 12:47pm
5
@suyash1
yes, I tried but I still get the same result.
I now tried to set a background color for all the sections in the homepage and it works but there are still spaces where that sticky section is visible (where there is margin). Is there a way to set a general background color for the whole page?
@Anonymous - you can try same color for these 3 sections
system
March 11, 2022, 1:10pm
7
@suyash1
thanks again for the answer.
The problem is not between those 3 sections but with the rest of the page. The sticky text remains visible on top of the rest of the page.
I solved it long time ago, you can see the codepen in the first message for the solution.
