Question

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

enter image description here

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

也许有人有想法？

Answer 1

您要找的是clipping。这允许您指定元素可见的矩形区域。

您可以使用：

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

在容器上为overflow: hidden菜单模拟position: fixed，以便您在滚动时裁剪文字。

请注意，虽然{@ 1}}已被弃用，但新的clip不适用于clip-path个元素，因此您暂时处于position: fixed状态。

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

position: relative

以下是演示：

＆＃13;

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

＆＃13;

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 {}

＆＃13;

Answer 2

您要查找的行为与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 3

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

jq-clipthru - 这是一个超级灵活的插件，可以完成你想要的任何事情（以及更多），但它也需要jQuery UI库。 [Demo]
Unobscure Text - 这是我非常轻量级的插件，它有一个非常具体的用例，但它与jQuery 3不兼容。[Demo]
< / LI>

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

Answer 4

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

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

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

您可以使用relative父母overflow来模仿颜色变化的影响。

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

代码段（相关部分）

<强> 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;
}

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

4 个答案: