如何隐藏在透明div下滚动的内容？ [英] How to hide content that is scrolled under a transparent div?
问题描述
你有两个div，一个在另一个，和顶部的是透明的。但是，当您滚动时，您希望底部的div隐藏，因为它在第一个透明 div下。
You have two divs, one over the other, and the one on top is transparent. However, when you scroll you want the div on the bottom to hide as it goes under the first transparent div.
您不希望第二个div的显示：更改为 none; ，一旦它在第一个div。你只需要隐藏下面的部分。
You don't want the second div's display: to change to none; as soon as it goes under the first div. You just want the part that is under to be hidden.
我已经广泛搜寻了一个答案：
I've googled extensively for an answer:
4) Transparent Static Header Would Like to Not End Up With Text Showing Under The Header When Scrolling
＃1 -4回答让div在顶部 background：inherit 或 background-image：url（'background_image.jpg）' 。这个问题对我来说是我的背景是一张照片，即当你向下滚动你看到的是不同的，而不是一种颜色或图案。透明div的背景需要随着实际背景的变化而改变。
#1-4 answer make the div on top background: inherit or background-image: url('background_image.jpg)'. The problem with this for me is my background is a photograph, i.e. as you scroll down what you see is different, as opposed to a colour or a pattern. The "background" of the transparent div needs to change as the real background changes.
＃5提供了一个使用JQuery的解决方案，但是有可怕的，可怕的问题与滚动滞后在浏览器而不是Firefox。
#5 offers a solution to this using JQuery however there are horrible, horrible issues with scroll lag in browsers not Firefox.
人们，我该怎么办？
推荐答案
无需JavaScript。对于不通过透明层显示的内容，它不能被渲染 - 您需要使用 overflow：hidden 。问题是如果内容与页面一起滚动，则内容的边缘不能是固定的。元素可以相对于视口或相对于页面定位，但不能同时定位。
This cannot be done without JavaScript. For the content to not show through a transparent layer, it must not be rendered at all — you would need to use overflow:hidden. The problem is that the edge of the content cannot be fixed if the content scrolls with the page. An element can be positioned relative to the viewport or relative to the page, but not both at the same time.
这篇关于如何隐藏在透明div下滚动的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
