【发布时间】：2018-05-08 02:23:30
【问题描述】：
我的布局包含一个带有按钮的fixed div (#navigation)。布局还包括可滚动内容 (.card)。
#navigation 目前有一个绿色背景用于演示目的。像这样：
#navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0%);
background: green;
padding: 25px;
}<div id="navigation"><button id="btn1">Button</button>
<button id="btn2">Button</button>
<button id="btn3">Button</button>
<button id="btn4">Button</button>
</div>我想隐藏任何.card 元素的任何部分，只要它位于绿色背景后面。所以，我使用 z-index 堆叠顺序并且效果很好。像这样：
#card-wrapper {
width: 250px;
margin: 100px auto;
}
.card {
height: 200px;
width: 200px;
background: #131418;
margin: 1em auto;
display: inline-block
}
#navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0%);
z-index: 1;
background: green;
padding: 25px;
}
#main {
text-align: center;
}<div id="main">
<div id="navigation"><button id="btn1">Button</button>
<button id="btn2">Button</button>
<button id="btn3">Button</button>
<button id="btn4">Button</button>
</div>
<div id="card-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>但是，我也不想在生产中使用绿色背景。这意味着#navigation 不应该有背景，只有里面的按钮应该是可见的。
所以我的问题是，如何在 #card-wrapper 到达假设的绿色背景后立即隐藏顶部溢出？
#card-wrapper {
width: 250px;
margin: 100px auto;
}
.card {
height: 200px;
width: 200px;
background: #131418;
margin: 1em auto;
display: inline-block
}
#navigation {
position: fixed;
top: 20px;
left: 50%;
transform: translate(-50%, 0%);
z-index: 1;
padding: 25px;
border: 1px solid;
background: transparent
}
#main {
text-align: center;
}
body {
margin: 0 auto;
background: url(http://svgur.com/i/42T.svg);
background-attachment:fixed;
background-size:cover;
}<div id="main">
<div id="navigation"><button id="btn1">Button</button>
<button id="btn2">Button</button>
<button id="btn3">Button</button>
<button id="btn4">Button</button>
</div>
<div id="card-wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>注意，body 元素有一个 SVG 背景，我不能为#navigation 添加任何背景，因为它看起来很糟糕。
我对所有 CSS/JS/jQuery 解决方案持开放态度，只要它们不涉及硬编码值
【问题讨论】：
-
1.应该使用真实的背景吗？ 2、一定要用
background-size: cover吗？ -
@Flying 1. 是的，最后一个 sn-p 中的背景是我打算使用的背景，因此您可以基于此解决方案。 2. 是的，背景填满了整个视口。
-
你的背景是半透明的，所以即使背景会被同步——你也不会得到“隐形”块，而是this外观。真的是你想要的吗？
-
@Flying 如果你可以很好地跨设备同步背景并调整视口大小，那么不要担心透明度，这是我稍后会处理的另一个问题。
-
除了浏览器，也可以在sn-p上测试
标签： javascript jquery css