javascript - 当部分在屏幕上可见或隐藏时，Jquery添加类

想法是找出 JavaScript 中可用的函数。

在研究有关该主题的更多信息时，我发现了交叉点观察者。这似乎是一个绝妙的选择和更快的加载时间。

以下是实现的想法，任何改进的建议都会很棒。

我考虑扩展脚本以使用数据属性来更好地控制这些部分。

我对 JavaScript 有点陌生，只是想用 UX 脚本挑战我的设计。

//const primary = document.querySelector('.primary');
//const secondary = document.querySelector('.secondary');

const sections = document.querySelectorAll('.secondary');
const options = {
	root: null, //it is the viewport
	threshold: 0.25,
	rootMargin: '-15% 0%  -15% 0% ',
};

const observer = new IntersectionObserver(function (entries, observerer) {
	entries.forEach((entry) => {
		//console.log(entry.target);
		//entry.target.classList.toggle('inverse');
		if (entry.isIntersecting) {
			document.body.classList.toggle('inverse');
		}
	});
}, options);

sections.forEach((section) => {
	observer.observe(section);
});

* {
	margin: 0;
	padding: 0;
}
section {
	width: 100%;
	height: 100vh;
	transition: background-color 1s ease;

	border: 1px solid;
}

:root {
	--primary: #f4f4f4;
	--secondary: #191918;
	--accent: #f9cdcd;
}

body {
	background-color: var(--primary);
	color: var(--secondary);
	transition: background-color 1s ease, color 1s ease;
	will-change: background-color, color;
}
h1 {
	text-align: center;
	padding-top: 50px;
	font-size: 4rem;
}

.primary {
	display: inline-block;
}

.secondary {
	display: inline-block;
}

.accent {
	display: inline-block;
}

.inverse {
	background-color: var(--secondary);
	color: var(--accent);
	transition: background-color 1s ease, color 1s ease;
	will-change: background-color, color;
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>IntersectionObserver</title>
		<link rel="stylesheet" href="./intersection_observer.css" />
	</head>
	<body>
		<section class="primary">
			<h1>Section 1</h1>
			<p>
				Deserunt tempor deserunt ullamco sunt eiusmod incididunt incididunt quis ea pariatur veniam pariatur
				duis in. Eu exercitation mollit irure ea velit cillum adipisicing laborum eu Lorem. Lorem elit voluptate
				non dolor. Quis veniam quis duis sint irure. Lorem laborum officia voluptate eiusmod quis esse quis elit
				quis est cupidatat ullamco elit nostrud. Sunt nisi aliqua incididunt commodo velit magna laboris.
			</p>
			<br />
			<p>
				Minim quis esse esse culpa. Commodo sunt ullamco deserunt consequat deserunt duis commodo irure
				consequat proident. Exercitation laborum commodo nostrud irure consectetur fugiat sit anim ex sint. Sit
				proident in est ullamco.
			</p>
			<br />
			<p>
				Veniam dolor in Lorem cupidatat nisi. Ad nulla id enim consectetur velit nulla ipsum culpa anim et
				consequat id pariatur do. Consequat eu irure excepteur commodo. Voluptate id fugiat aliqua sit do nisi
				id cupidatat tempor quis. Deserunt Lorem velit exercitation cupidatat non aliqua eiusmod magna eiusmod.
				Ipsum excepteur consectetur ea voluptate sunt. Non Lorem tempor dolore tempor amet laboris ad duis
				labore.
			</p>
		</section>
		<section class="secondary">
			<h1>Section 2</h1>
			<p>
				Deserunt tempor deserunt ullamco sunt eiusmod incididunt incididunt quis ea pariatur veniam pariatur
				duis in. Eu exercitation mollit irure ea velit cillum adipisicing laborum eu Lorem. Lorem elit voluptate
				non dolor. Quis veniam quis duis sint irure. Lorem laborum officia voluptate eiusmod quis esse quis elit
				quis est cupidatat ullamco elit nostrud. Sunt nisi aliqua incididunt commodo velit magna laboris.
			</p>
			<br />
			<p>
				Minim quis esse esse culpa. Commodo sunt ullamco deserunt consequat deserunt duis commodo irure
				consequat proident. Exercitation laborum commodo nostrud irure consectetur fugiat sit anim ex sint. Sit
				proident in est ullamco.
			</p>
			<br />
			<p>
				Veniam dolor in Lorem cupidatat nisi. Ad nulla id enim consectetur velit nulla ipsum culpa anim et
				consequat id pariatur do. Consequat eu irure excepteur commodo. Voluptate id fugiat aliqua sit do nisi
				id cupidatat tempor quis. Deserunt Lorem velit exercitation cupidatat non aliqua eiusmod magna eiusmod.
				Ipsum excepteur consectetur ea voluptate sunt. Non Lorem tempor dolore tempor amet laboris ad duis
				labore.
			</p>
		</section>
		<section class="primary">
			<h1>Section 3</h1>
			<p>
				Deserunt tempor deserunt ullamco sunt eiusmod incididunt incididunt quis ea pariatur veniam pariatur
				duis in. Eu exercitation mollit irure ea velit cillum adipisicing laborum eu Lorem. Lorem elit voluptate
				non dolor. Quis veniam quis duis sint irure. Lorem laborum officia voluptate eiusmod quis esse quis elit
				quis est cupidatat ullamco elit nostrud. Sunt nisi aliqua incididunt commodo velit magna laboris.
			</p>
			<br />
			<p>
				Minim quis esse esse culpa. Commodo sunt ullamco deserunt consequat deserunt duis commodo irure
				consequat proident. Exercitation laborum commodo nostrud irure consectetur fugiat sit anim ex sint. Sit
				proident in est ullamco.
			</p>
			<br />
			<p>
				Veniam dolor in Lorem cupidatat nisi. Ad nulla id enim consectetur velit nulla ipsum culpa anim et
				consequat id pariatur do. Consequat eu irure excepteur commodo. Voluptate id fugiat aliqua sit do nisi
				id cupidatat tempor quis. Deserunt Lorem velit exercitation cupidatat non aliqua eiusmod magna eiusmod.
				Ipsum excepteur consectetur ea voluptate sunt. Non Lorem tempor dolore tempor amet laboris ad duis
				labore.
			</p>
		</section>
		<section class="secondary">
			<h1>Section 4</h1>
			<p>
				Deserunt tempor deserunt ullamco sunt eiusmod incididunt incididunt quis ea pariatur veniam pariatur
				duis in. Eu exercitation mollit irure ea velit cillum adipisicing laborum eu Lorem. Lorem elit voluptate
				non dolor. Quis veniam quis duis sint irure. Lorem laborum officia voluptate eiusmod quis esse quis elit
				quis est cupidatat ullamco elit nostrud. Sunt nisi aliqua incididunt commodo velit magna laboris.
			</p>
			<br />
			<p>
				Minim quis esse esse culpa. Commodo sunt ullamco deserunt consequat deserunt duis commodo irure
				consequat proident. Exercitation laborum commodo nostrud irure consectetur fugiat sit anim ex sint. Sit
				proident in est ullamco.
			</p>
			<br />
			<p>
				Veniam dolor in Lorem cupidatat nisi. Ad nulla id enim consectetur velit nulla ipsum culpa anim et
				consequat id pariatur do. Consequat eu irure excepteur commodo. Voluptate id fugiat aliqua sit do nisi
				id cupidatat tempor quis. Deserunt Lorem velit exercitation cupidatat non aliqua eiusmod magna eiusmod.
				Ipsum excepteur consectetur ea voluptate sunt. Non Lorem tempor dolore tempor amet laboris ad duis
				labore.
			</p>
		</section>
		<script src="./intersectionobserver.js"></script>
	</body>
</html>

阿克

javascript - 当部分在屏幕上可见或隐藏时，Jquery添加类

问题描述

解决方案

推荐阅读