Можно ли изменить этот цвет div на свитке, используя только CSS?

Question

Спасибо, что нашли время, чтобы прочитать мой пост. Так что я недавно начал заниматься фрилансом (CSS и HTML) и нашел свою первую трудность.

Посмотрите на зеленую полосу (это фиксированный div), она зеленая для тестирования porpuses, но клиент хочет, чтобы она была прозрачной, когда поверх этого оранжевого фона ...

... Но переключитесь на другой цвет, когда поверх этого белого фона (так что буквы видны)

Возможно ли это сделать с помощью CSS? Если да, то как мне это сделать? Еще раз спасибо!

Answer 1

Pure css в настоящее время не реагирует на то, что на экране, а что нет.Итак, краткий хромой ответ «не просто css».

При этом очень легко сделать это с помощью js.

Событие, которое вы будете искать, scroll событие .

Оттуда вы можете добавить / удалить класс для стиля.

Примерно так:

// wait for document.addEventListener("DOMContentLoaded");

const myHeader = document.getElementById("MyHeader");
window.addEventListener("scroll", () => {
  const scrollPos = window.scrollY;
  if (scrollPos ... add your logic here) {
    myHeader.classList.add("scrollIsThing");  // this is the css class you'll target
  } else {
    myHeader.classList.remove("scrollIsThing");
  }
});

Извините, ничего хорошегоcss способ сделать это.

Answer 2

Это можно сделать только с помощью css, если вы можете принять некоторое дублирование html-разметки. Вы можете разделить фиксированный заголовок на два слоя, один для белого текста, один для фона, и, используя z-index, вы можете разделить содержимое между этими двумя слоями заголовка (в случае красочного содержимого), и в этом случае только белый текст будет виден, и поместите белый контент ниже фона заголовка. Пример такого поведения показан ниже:

.header {
  height: 50px;
  background: transparent;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  font-family: sans;
  text-align: center;
  line-height: 50px;
  z-index: 3;
}

.header.header-background {
  background: teal;
  z-index: 1;
}

.body1 {
  height: 120vh;
  background: orange;
  z-index: 2;
  position: relative;
}

.body2 {
  height: 120vh;
  background: #eee;
  
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
}

<div class="header">
  White text
</div>
<div class="body1"></div>
<div class="header header-background">

</div>
<div class="body2"></div>