CSS在滚动/剪切文本上更改颜色 - 溢出z-index

Question

这个可能是个大谜.也许不是.我想position:fixed在滚动时更改菜单的颜色.

我的第一个目的是使用两个固定菜单,overflow:hidden但它不适用于固定元素.我的第二次尝试是使用z-index.但似乎不可能.

也许有人有想法？

Answer 1

你要找的是剪裁.这允许您指定元素可见的矩形区域.

您可以使用:

clip: rect(auto, auto, auto, auto);

在容器上,以模拟overflow: hidden的position: fixed菜单,让您可以为您滚动裁剪文本.

请注意,虽然clip不推荐使用new,但new clip-path不适用于position: fixed元素,因此您clip现在仍处于困境.

clip需要绝对或固定定位,但您可以通过position: absolute在position: relative容器中放置元素轻松解决该问题,如下所示:

<div style="position: relative;">
    <div style="position: absolute; clip: rect(auto, auto, auto, auto);">
        <!-- My awesome menu here -->
    </div>
</div>

这是演示:

html,
body {
  height: 100%;
  margin: 0;
  padding: 10% 5% 80% 5%;
  background-color: #eee;
  font-family: sans-serif;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  position: relative;
}
.cell.small {
  height: 25%;
}
.header,
.content,
.footer {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 4%;
  box-sizing: border-box;
  clip: rect(auto, auto, auto, auto);
}
.header,
.footer {
  background-color: #F97D9F;
}
.menu {
  position: fixed;
  font-size: 2em;
  top: 10%;
  right: 20%;
}
.white {
  color: #fff;
}
.black {}

<div class="container">
  <div class="row">
    <div class="cell small">
      <div class="header">
        content
        <div class="menu white">MENU</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <div class="content">
        content
        <div class="menu black">MENU</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell small">
      <div class="footer">
        content
        <div class="menu white">MENU</div>
      </div>
    </div>
  </div>
</div>

Answer 2

您正在寻找的行为与之相同background-attachement:fixed;.

虽然这个解决方案非常简单,并且不依赖于JS,但从典型的角度来看,它不应该被推荐.

关键是使用2个背景图像,background-attachement: fixed;并将链接定位在它们之间进行交互.它会根据背景颜色为您提供所需的行为,颜色变化平滑:

DEMO

header, article,footer,body{
    background:#fff url('http://i.imgur.com/oHIZBHL.png') no-repeat;
    background-attachment: fixed;
    background-position:right 160px top 10px;
}
body{
    padding:0 150px 1000px;
    background-color:lightgrey;
}
header,footer{
    background-image:url('http://i.imgur.com/79IWeQK.png');
    background-color:#F97D9F;
    height:125px;
}
article{
    height:500px;
}
nav a{
    position:fixed;
    top:10px; right:160px;
    width:150px; height:50px;
}

<nav><a href="#" title="menu"></a></nav>
<header></header>
<article></article>
<footer></footer>