Изменение цвета CSS в тексте прокрутки/вырезания - переполнение z-index

Ответ 1

Что вы ищете, это отсечение. Это позволяет указать прямоугольную область, в которой видна элемент.

Вы можете использовать:

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

в контейнере для эмуляции overflow: hidden для меню position: fixed, чтобы вы могли обрезать текст по мере прокрутки.

Обратите внимание, что в то время как clip устарел, новый 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>

Ответ 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>

Ответ 3

EDIT: доказал, что он НЕ работает в Firefox, так что, возможно, это просто уловка Chrome, все еще интересное поведение, поэтому я оставлю этот ответ, если кто-то просто захочет создать версию только для Chrome или когда появятся Firefox и другие браузеры а.

Там я "исправил" его (каламбур:):)

Посмотрите на эту рабочую скрипку: JSFiddle пример фиксированной, относительной и переполненной совместной работы

Вы можете использовать родителей 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;
}

Ответ 4

Если вы не хотите управлять дублирующими элементами, чтобы снять этот эффект с помощью CSS clip в соответствии с решением Antony, вы можете использовать пару jQuery-плагинов:

• jq-clipthru - это супергибкий плагин, который, вероятно, может делать все, что вам нужно (и многое другое), но он также требует библиотеки jQuery UI. [Demo]

• Unobscure Text - Это очень легкий плагин с очень конкретным вариантом использования, но он несовместим с jQuery 3. [Demo]

Если вам нужна поддержка jQuery 3 и вам не нужна IE 11 и ниже, вы можете использовать решение на основе SVG clip-path, like это.