滚动/剪切文本上的CSS更改颜色 - 溢出z-index [英] CSS change color on scroll / cut text - overflow z-index

问题描述

这一个也许是一个大谜语。也许它不是。我想在滚动时更改位置：固定菜单的颜色。

This one is maybe a big riddle. Maybe its not. I want to change the color of a position:fixed menu when scrolling.

我的第一个目的是使用两个固定的菜单和 overflow：hidden 但它不工作在固定的元素。我的第二个尝试是使用 z-index 。

My first intention was to use two fixed menus and overflow:hidden but it doesnt work on fixed elements. My second try was using z-index. But it seems impossible.

也许有人有想法？

推荐答案

您要查找的是剪切。

您可以使用：

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

以模拟 overflow：hidden position：fixed 菜单，以便您可以在滚动时裁剪文本。

Note that while clip is deprecated, the new clip-path does not work with position: fixed elements, so you are stuck with clip for now.

请注意， c $ c> clip 已弃用，新 clip-path 不能使用 position：fixed 元素，所以你现在卡住 clip 。

clip requires absolute or fixed positioning, but you can easily work around that problem by placing a position: absolute element inside a position: relative container, like so:

/ code>需要绝对定位或固定定位，但是您可以通过在位置中放置 position：absolute 相对容器，如下：

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

Here is the demo:

以下是演示：

div class =snippetdata-lang =jsdata-hide =false>

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>

这篇关于滚动/剪切文本上的CSS更改颜色 - 溢出z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！