当孩子被固定时，溢出隐藏在粘性父母身上

Question

I am building a website that has section panels slide up using position: sticky on scrolling but having issues with fixed elements inside the sticky panels not hiding outside of the section with overflow: hidden .

How can I hide the Logo and Footer outside of each of their section so that they are not sitting over each other and instead on scroll the Logo and Footer appear as their intended colors?

Here is a simple snippet of the problem. As you can see, on the sticky sections, I have applied overflow: hidden but this is ineffective.

 html { font-family: sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; } *, ::after, ::before { box-sizing: border-box; } body { margin: 0; overflow-x: hidden; }.nav { position: fixed; width: 100%; top: 0; left: 0; padding: 24px 28px; display: flex; flex-direction: column; justify-content: space-between; }.footer { position: fixed; bottom: 0; right: 0; }.sticky { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: column; position: sticky; overflow: hidden; // Not working to hide and contain the logo and Footer in the section top: -1px; background-color: #ffffff; color: #000000; }.dark { background-color: #1e1e1e; color: #fff; }.image { color: #fff; background-image: url('https://images.unsplash.com/photo-1621864972187-063dae587c27?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'); background-size: cover; }

 <main> <div class="sticky"> <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="black">Logo svg!</text> </svg></div> <p>Section Light</p> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="black">Footer!</text> </svg></div> </div> <div class="sticky dark"> <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="white">Logo svg!</text> </svg></div> <p>Section Dark</p> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="white">Footer!</text> </svg></div> </div> <div class="sticky image"> <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="white">Logo svg!</text> </svg></div> <p>Section with Image</p> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="white">Footer!</text> </svg></div> </div> <div class="sticky dark"> <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="white">Logo svg!</text> </svg></div> <p>Section Dark</p> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="white">Footer!</text> </svg></div> </div> <div class="sticky"> <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="black">Logo svg!</text> </svg></div> <p>Section Light</p> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="black">Footer!</text> </svg></div> </div> </main>

The website is built using Gatsby incase anyone has a JS solution. I was perhaps thinking of hiding each using a ref and applying a className . Although I am sure there is a simpler solution out there.

Answer 1

Not sure whether you need separate content for the nav and footer per section but this answer only applies if you want the same header and footer content to appear over all sections and just change color.

It's possible usingmix-blend-mode and the support is good for modern browsers. The spec says that Safari doesn't work "On SVG elements" but it seems to work fine on Safari in the demo below, maybe because it's applied to the SVG's parent.

I pulled the nav and footer out of each section and made one copy of each at the top. Then I applied mix-blend-mode: difference; to both of them and made the fill color of the SVG elements white. Then I added mix-blend-mode: screen; to the .dark class which makes it so that whenever the white SVG elements with difference on their parent container pass over it the color of the SVG elements will change to white. This will not be very useful if you're looking to support IE or if you want different headers and footers by section but in the event that you just want what you had in your code demo to work as you explained then it should be fine for modern browsers.

If you do need varying content per section then it will most likely require Javascript since a fixed element will not respect a relative positioned parent element's rules or will not act like a window fixed element on scroll when using the translateZ hack for instance, good luck!

 html { font-family: sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; } *, ::after, ::before { box-sizing: border-box; } body { margin: 0; overflow-x: hidden; }.nav { position: fixed; width: 100%; top: 0; left: 0; padding: 24px 28px; display: flex; flex-direction: column; justify-content: space-between; z-index: 99; mix-blend-mode: difference; }.footer { position: fixed; bottom: 0; right: 0; z-index: 99; mix-blend-mode: difference; }.sticky { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; background-color: #ffffff; color: #000000; }.sticky p { position: sticky; top: 50%; transform: translateY(-50%) }.dark { background-color: #1e1e1e; color: #fff; mix-blend-mode: screen; }

 <div class="nav"><svg height="30" width="200"> <text x="0" y="15" fill="#fff">Logo svg!</text> </svg></div> <div class="footer"><svg height="30" width="200" transform="rotate(90)"> <text x="0" y="15" fill="#fff">Footer!</text> </svg></div> <main> <div class="sticky"> <p>Section Light</p> </div> <div class="sticky dark"> <p>Section Dark</p> </div> <div class="sticky"> <p>Section Light</p> </div> <div class="sticky dark"> <p>Section Dark</p> </div> <div class="sticky"> <p>Section Light</p> </div> </main>