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

Question

我正在构建一个网站，该网站使用position: sticky on scrolling 将section面板向上滑动，但在sticky面板内的固定元素没有隐藏在section之外时出现问题overflow: hidden 。

如何将徽标和页脚隐藏在其每个section之外，以使它们不会彼此重叠，而是在scroll时将徽标和页脚显示为预期的 colors？

这是问题的一个简单片段。 如您所见，在sticky部分，我应用了overflow: hidden ，但这无效。

 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>

该网站是使用 Gatsby 构建的，以防任何人都有 JS 解决方案。 我可能正在考虑使用ref隐藏每个并应用className 。 虽然我确信那里有一个更简单的解决方案。

Answer 1

不确定您是否需要每个部分的nav和footer单独的内容，但此答案仅适用于您希望相同的 header 和页脚内容出现在所有部分并且只是更改颜色的情况。

可以使用mix-blend-mode并且对现代浏览器的支持很好。 规范说 Safari “在 SVG 元素上”不起作用，但它似乎在下面的演示中的 Safari 上工作正常，可能是因为它应用于 SVG 父级。

我将导航和页脚从每个部分中拉出，并在顶部分别制作了一份副本。 然后我应用mix-blend-mode: difference; 到他们两个，并将 SVG 元素的填充颜色设为白色。 然后我添加了mix-blend-mode: screen; 到.dark class 这使得每当白色 SVG 元素在其父容器上有difference时通过它， SVG 元素的颜色将变为白色。 如果您希望支持 IE，或者如果您希望按部分使用不同的页眉和页脚，那么这将不是很有用，但是如果您只希望代码演示中的内容按照您的解释工作，那么它应该没问题现代浏览器。

如果您确实需要每个部分不同的内容，那么它很可能需要 Javascript 因为固定元素不会遵守相对定位的父元素的规则，或者在使用translateZ hack时不会像 window 滚动上的固定元素一样，祝你好运！

 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>