Javascript-форум - Смена цвета текста в зависимости от секции

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Смена цвета текста в зависимости от секции (https://javascript.ru/forum/misc/66712-smena-cveta-teksta-v-zavisimosti-ot-sekcii.html)

Смена цвета текста в зависимости от секции

Здравствуйте, на сайте есть фиксированное меню для перехода по якорям на сайте. Сайт разделен на секции <section> с разными id.

Подскажите, как можно реализовать смену цвета текста меню, в зависимости от того поверх какой секции оно отображается.

http://u42997.s13.wh1.su/

Цвет должен чередоваться, то есть 1, 3, 5 секции - белый цвет, а 2, 4, 6 - черный. Как то так) Помогите кому не трудно, пожалуйста.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
		<style>
			
html {
	background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
	background-attachment: fixed;
	height: 100vh;
}

body, .scrolling {
	margin: 0;
	height: 100vh;
	overflow: auto;
}

nav {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 1em 1.5em;
	margin: 1em;
	border-radius: 70% 15% 40% 11%;
	z-index: 1;
	font-weight: bold;
	font-size: 130%;
}

section {
	height: 100vh;
	position: relative;
	top: 100vh;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font: 20vh "Helvetica Neue", sans-serif;
}

section:nth-child(2n + 1), nav.white {
	color: #fff;
	background: #000;
	mix-blend-mode: multiply;
}

section:nth-child(2n), nav.black {
	color: #000;
	background: #fff;
	mix-blend-mode: screen;
}
			
		</style>
	</head>
	<body>
		<div class="scrolling">
			<nav>☰</nav>
			<section>Lorem</section>
			<section>Ipsum</section>
			<section>Dolor</section>
			<section>Sit</section>
			<section>Amet</section>
		</div>
		
		<script>
			
{
	const nav = document.querySelector("nav");
	nav.className = "black";

	document.querySelector(".scrolling").addEventListener("scroll", event => {
		let element = event.target;
		let progress = (.5 + element.scrollTop / element.offsetHeight) | 0;

		nav.className = progress % 2 ? "white" : "black";
	});
};
			
		</script>
	</body>
</html>

Malleys,
может вместо стрелочной функции обычную оставить в данном случае, тогда строка 77 не нужна будет или оставить но строку 77 перенести в строку 75?

рони,
Может её вообще удалить? И...

let progress = (.5 + event.target.scrollTop / event.target.offsetHeight) | 0;

Цитата:

Сообщение от рони

Может её вообще удалить?

неа, оба варианта предложенных выше, не используют event от слова совсем :)

Если только один .scrolling, тогда да! А если много? Не заводить же массив элементов .scrolling

Цитата:

Сообщение от Malleys

А если много?

не понимаю, что это меняет. event потребуется только в случае с делегированием ... а сейчас это только лишнее создание переменной element, при любом scroll, которую можно создать всего 1 раз или не создавать вовсе.

Да. Можно не создавать Вы правы! Я вообще сначала хотел сделать с mix-blend-mode, но у меня не очень получилось найти правильный режим наложения...

Malleys,

Пример: вариант с this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <style>

html {
  background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
  background-attachment: fixed;
  height: 100vh;
}

body, .scrolling {
  margin: 0;
  height: 100vh;
  overflow: auto;
}

nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1em 1.5em;
  margin: 1em;
  border-radius: 70% 15% 40% 11%;
  z-index: 1;
  font-weight: bold;
  font-size: 130%;
}

section {
  height: 100vh;
  position: relative;
  top: 100vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20vh "Helvetica Neue", sans-serif;
}

section:nth-child(2n + 1), nav.white {
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
}

section:nth-child(2n), nav.black {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

    </style>
  </head>
  <body>
    <div class="scrolling">
      <nav>☰</nav>
      <section>Lorem</section>
      <section>Ipsum</section>
      <section>Dolor</section>
      <section>Sit</section>
      <section>Amet</section>
    </div>

    <script>
{
  const nav = document.querySelector("nav");
  nav.className = "black";
  document.querySelector(".scrolling").addEventListener("scroll", function() {
    let progress = (.5 + this.scrollTop / this.offsetHeight) | 0;
    nav.className = progress % 2 ? "white" : "black";
  });
};

    </script>
  </body>
</html>

Пример: вариант с const element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <style>

html {
  background: url("http://wallpaperscraft.com/image/mazda_white_front_view_113205_5064x3376.jpg") center / cover;
  background-attachment: fixed;
  height: 100vh;
}

body, .scrolling {
  margin: 0;
  height: 100vh;
  overflow: auto;
}

nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1em 1.5em;
  margin: 1em;
  border-radius: 70% 15% 40% 11%;
  z-index: 1;
  font-weight: bold;
  font-size: 130%;
}

section {
  height: 100vh;
  position: relative;
  top: 100vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 20vh "Helvetica Neue", sans-serif;
}

section:nth-child(2n + 1), nav.white {
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
}

section:nth-child(2n), nav.black {
  color: #000;
  background: #fff;
  mix-blend-mode: screen;
}

    </style>
  </head>
  <body>
    <div class="scrolling">
      <nav>☰</nav>
      <section>Lorem</section>
      <section>Ipsum</section>
      <section>Dolor</section>
      <section>Sit</section>
      <section>Amet</section>
    </div>

    <script>
{
  const nav = document.querySelector("nav");
  nav.className = "black";
  const element = document.querySelector(".scrolling");
  element.addEventListener("scroll", () =>{
    let progress = (.5 + element.scrollTop / element.offsetHeight) | 0;
    nav.className = progress % 2 ? "white" : "black";
  });
};
    </script>
  </body>
</html>

Цитата:

Сообщение от Malleys

Я вообще сначала хотел сделать с mix-blend-mode

если б я ещё понимал о чём это :) предолагаю что-то с CSS препроцессор ... :)