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

Question

我想在滚动时更改position:fixed 菜单的颜色。

我的第一个意图是使用两个固定菜单和overflow:hidden，但它不适用于固定元素。我的第二次尝试是使用z-index。但这似乎是不可能的。

也许有人有想法？

Answer 1

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

虽然这个解决方案非常简单，不依赖 JS，但从语义的角度来看，不应该推荐它。

重点是使用带有background-attachement: fixed; 的2 个背景图像，并将链接放置在它们上方以进行交互。它会根据背景颜色以平滑的颜色变化为您提供所需的行为：

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>

Answer 2

编辑：证明它不适用于 Firefox，所以这可能只是 Chrome 的一个怪癖，仍然很有趣，所以如果有人只想构建一个 Chrome 唯一的实现或者当 Firefox 和其他浏览器出现时，我会留下这个答案一起来。

在那里，我“修复了”它（双关语:)）

看看这个工作小提琴： JSFiddle example of fixed, relative and overflow working together

您可以使用relative 父母和overflow 来模拟颜色变化的效果。

缺点：你必须复制你的菜单（这在语义上很好，只是完全错误）。不过，您可以使用一些基本的 javascript 来复制菜单，这会有所改善。我也只在 Chrome 上测试过这个，但它看起来很基本的 CSS，所以我想这将适用于任何浏览器/设备。

代码sn-ps（相关部分）

HTML

<div class="topbar">
    <h1>Whoo pink!</h1>
    <div class="fixed-menu">Fixed!</div>
</div>
<div class="loads-of-content">
    <div class="fixed-menu">Fixed!</div>
</div>

CSS

.topbar {
    position: relative;
    overflow: hidden;
    z-index: 3;
}

.topbar .fixed-menu {
    color: red;
}
.fixed-menu {
    position: fixed;
    top: 20px;
    right: 50px;
}
.loads-of-content {
    position: relative;
    overflow: hidden;
}

Answer 3

您正在寻找的是clipping。这允许您指定一个元素可见的矩形区域。

你可以使用：

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

在容器上模拟overflow: hidden 的position: fixed 菜单，因此您可以在滚动时裁剪文本。

请注意，虽然 clip 已弃用，但新的 clip-path 不适用于 position: fixed 元素，因此您现在只能使用 clip。

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

<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 4

如果您不想按照 Antony 的解决方案管理重复元素以使用 CSS clip 实现此效果，那么您可以使用几个 jQuery 插件：

• jq-clipthru - 这是一个超级灵活的插件，可能可以做任何你想做的事情（以及更多），但它也需要 jQuery UI 库。 [Demo]

• Unobscure Text - 这是我非常轻量级的插件，有一个非常具体的用例，但它与 jQuery 3 不兼容。[Demo]

如果您需要 jQuery 3 支持并且不关心 IE 11 及更低版本，那么您可以使用基于 SVG clip-path、like this 的解决方案。