以下示例是关于Javascript中包含用交叉观察者更改内容用法的示例代码，想了解用交叉观察者更改内容的具体用法？用交叉观察者更改内容怎么用？用交叉观察者更改内容使用的例子？那么可以参考以下相关示例代码来学习它的具体使用方法。
// Optimized resize function
(function() {
var throttle = function(type, name, obj) {
obj = obj || window;
var running = false;
var func = function() {
if (running) {
return;
}
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle("resize", "optimizedResize");
})();
const stickyEl = document.querySelector(".room-info_sticky");
const stickyContent = stickyEl.querySelector(".room-info__inner");
const roomsContainer = document.querySelector(".rooms__inner");
const rooms = [...document.querySelectorAll(".room")];
// Update sticky position on window resize
const setStickyPosition = function() {
let stickyStart = Math.trunc((window.innerHeight - stickyEl.offsetHeight) / 2);
stickyEl.style.top = `${stickyStart}px`;
};
setStickyPosition();
window.addEventListener("optimizedResize", function() {
if (window.matchMedia("(min-width: 768px)").matches) {
setStickyPosition();
}
});
// Update sticky content
const updateSticky = function(element) {
stickyEl.querySelector(".room__heading").textContent = element.querySelector(".room__heading").textContent;
stickyEl.querySelector(".room__text").textContent = element.querySelector(".room__text").textContent;
stickyEl.querySelector(".room__btn").href = element.querySelector(".room__btn").href;
};
updateSticky(rooms[0]);
// Room sections observer
const obsOptions = {
root: null,
//rootMargin: "50px 0px",
threshold: 0.5,
};
/* Create the observer */
const roomObserver = new IntersectionObserver((entries) => {
let prevOrder = stickyEl.dataset.current || "0";
entries.forEach((entry) => {
if (entry.isIntersecting) {
stickyEl.dataset.current = entry.target.dataset.order;
if (prevOrder !== stickyEl.dataset.current) {
stickyContent.style.opacity = 0;
setTimeout(() => {
updateSticky(entry.target);
stickyContent.style.opacity = 1;
}, 300);
}
}
});
}, obsOptions);
rooms.forEach((room, i) => {
roomObserver.observe(room);
room.dataset.order = i;
});/* Box sizing rules */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
display: block;
}
@font-face {
font-family: "Roos";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("Roos"), url("./fonts/RoosStRegisDisplay-Regular.woff2") format("woff2"), url("fonts/RoosStRegisDisplay-Regular.woff") format("woff");
unicode-range: U+000-5FF;
}
@font-face {
font-family: "Suisse";
font-style: normal;
font-weight: normal;
font-display: swap;
src: local("Suisse"), url("./fonts/SuisseBPIntl-Regular.woff2") format("woff2"), url("fonts/SuisseBPIntl-Regular.woff") format("woff");
unicode-range: U+000-5FF;
}
@font-face {
font-family: "Suisse";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("Suisse"), url("./fonts/SuisseBPIntl-Medium.woff2") format("woff2"), url("fonts/SuisseBPIntl-Medium.woff") format("woff");
unicode-range: U+000-5FF;
}
@font-face {
font-family: "Suisse";
font-style: normal;
font-weight: 300;
font-display: swap;
src: local("Suisse"), url("./fonts/SuisseBPIntl-Light.woff2") format("woff2"), url("fonts/SuisseBPIntl-Light.woff") format("woff");
unicode-range: U+000-5FF;
}
body {
background-color: #efe8e3;
}
.placeholder {
height: 100vh;
background-color: orange;
}
.rooms {
margin: 17.361vw 11.111vw;
position: relative;
}
.rooms__sticky {
left: 0;
top: 5.556vw;
height: 100%;
z-index: 5;
position: absolute;
will-change: transform;
}
.room {
width: 61.111vw;
position: relative;
margin: 0 0 17.361vw 16.667vw;
}
.room-info {
background: #fff;
color: #3a3636;
font-family: "Suisse";
position: relative;
z-index: 1;
}
.room-info__inner {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.room-info_sticky {
padding: 5.556vw;
position: sticky;
top: 0;
width: 33.333vw;
min-height: 42.708vw;
}
.room__content {
display: none;
}
.room__heading {
font-family: "Roos";
font-size: 3.472vw;
font-weight: normal;
letter-spacing: -0.061vw;
}
.room__heading::after {
content: "";
display: block;
height: 1px;
width: 8.33vw;
margin: 2.8vw 0;
background: #ff4338;
}
.room__text {
font-weight: 300;
font-size: 1.042vw;
line-height: 1.875vw;
letter-spacing: 0.05vw;
}
.room__btn {
height: 2.778vw;
line-height: 2.778vw;
color: #ff4338;
display: block;
cursor: pointer;
position: relative;
padding-left: 3.5vw;
font-weight: 500;
font-size: 0.764vw;
letter-spacing: 0.208vw;
text-transform: uppercase;
text-decoration: none;
margin: 2.8vw 0 0;
}
.room__btn svg {
top: 0.95vw;
left: -0.95vw;
width: 2.153vw;
height: 0.556vw;
fill: #ff4338;
z-index: 1;
position: absolute;
transition: all 0.25s ease-out;
}
.room__btn svg rect {
will-change: transform;
transform-origin: right center;
transition: transform 0.25s ease-out;
}
.room__btn:after,
.room__btn:before,
.room__btn span {
display: block;
will-change: transform;
transition: transform 0.25s ease-out;
}
.room__btn span {
display: block;
will-change: transform;
transition: transform 0.25s ease-out;
}
.room__btn:after,
.room__btn:before {
left: 0;
top: 0.27vw;
width: 1.944vw;
height: 1.944vw;
content: "";
position: absolute;
transform: rotate(45deg);
}
.room__btn::before {
border: 1px solid #ff4338;
}
.room__btn::after {
background: #ff4338;
transform: scale(0.01) rotate(45deg);
}
.room__btn:hover:after,
.room__btn:hover:before {
transform: rotate(-45deg) scale(1.2);
}
.room__btn:hover svg {
fill: #fff;
transform: translateX(0.3vw);
}
.room__btn:hover span {
transform: translateX(0.5vw);
}
.room__btn:hover svg rect {
transform: scaleX(0.5);
}
.room__figure {
}
.room__img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 980px) {
.room__heading {
font-size: 2.1em;
}
.room__text {
line-height: 1.3;
font-size: 0.8em;
}
.room__btn {
font-size: 0.65em;
}
}
@media screen and (max-width: 767px) {
.rooms {
margin: 17vw 8vw;
}
.rooms__sticky {
display: none;
}
.room {
margin: 0;
width: auto;
}
.room__content {
position: relative;
display: block;
min-height: auto;
height: auto;
width: 66.667vw;
padding: 8vw;
margin: -26.667vw 8vw 13.333vw;
z-index: 1;
overflow: hidden;
}
.room__heading {
font-size: 7.467vw;
}
.room__heading::after {
width: 16.533vw;
margin: 6.667vw 0;
}
.room__text {
font-size: 4vw;
line-height: 6.4vw;
}
.room__btn {
margin-top: 4vw;
height: 8vw;
line-height: 8vw;
font-size: 2.933vw;
padding-left: 9vw;
}
.room__btn svg {
top: 2.2vw;
left: -3vw;
width: 6.667vw;
height: 2.667vw;
}
.room__btn:before {
top: 1vw;
width: 5.333vw;
height: 5.333vw;
}
.room__btn:after {
top: 1vw;
width: 5.333vw;
height: 5.333vw;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky section</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<!-- Custom section -->
<div class="placeholder"></div>
<div class="rooms">
<div class="rooms__sticky">
<div class="room-info room-info_sticky">
<div class="room-info__inner">
<h2 class="room__heading"></h2>
<p class="room__text"></p>
<a href="#" class="room__btn" target="_blank" style="opacity: 1">
<svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="30" height="1"></rect>
<polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
</svg>
<span>Read more</span>
</a>
</div>
</div>
</div>
<div class="rooms__inner">
<div class="room">
<figure class="room__figure">
<img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
</figure>
<div class="room__content room-info">
<h2 class="room__heading">Taste of Luxury</h2>
<p class="room__text">Stay exquisite at Venice's best address. Each day begins with the pleasure of a full breakfast, and enjoy a 90 Euro dining credit per person daily.</p>
<a href="#" class="room__btn" target="_blank" style="opacity: 1">
<svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="30" height="1"></rect>
<polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
</svg>
<span>Read more</span>
</a>
</div>
</div>
<div class="room">
<figure class="room__figure">
<img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
</figure>
<div class="room__content room-info">
<h2 class="room__heading">Suite Indulgence</h2>
<p class="room__text">
Gift yourself time and an extraordinary suite lifestyle, discreetly attended by a St. Regis Butler. Includes arrival transfer, private dining, champagne and Venice’s superb views.
</p>
<a href="#" class="room__btn" target="_blank" style="opacity: 1">
<svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="30" height="1"></rect>
<polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
</svg>
<span>Read more</span>
</a>
</div>
</div>
<div class="room">
<figure class="room__figure">
<img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
</figure>
<div class="room__content room-info">
<h2 class="room__heading">Romance in Venice</h2>
<p class="room__text">Escape to The St. Regis Venice for the perfect romantic retreat. Embrace the city’s captivating spirit while we anticipate every precious detail of your stay.</p>
<a href="#" class="room__btn" target="_blank" style="opacity: 1">
<svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="30" height="1"></rect>
<polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
</svg>
<span>Read more</span>
</a>
</div>
</div>
<div class="room">
<figure class="room__figure">
<img src="https://cultivatingthevanguard.com/wp-content/uploads/2021/04/Table-for-2-A-1.jpg" class="room__img" alt="Room image" />
</figure>
<div class="room__content room-info">
<h2 class="room__heading">A Family Affair</h2>
<p class="room__text">Engage in extraordinary family moments discovering the wonders of the city and staying at The St. Regis Venice with 50% off a second room for children.</p>
<a href="#" class="room__btn" target="_blank" style="opacity: 1">
<svg enable-background="new 0 0 30.99 6.99" viewBox="0 0 30.99 6.99" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<rect y="3" width="30" height="1"></rect>
<polyline points="26.78 0.68 28.18 2.08 29.58 3.48 26.8 6.26 27.53 6.99 30.99 3.53 27.46 0"></polyline>
</svg>
<span>Read more</span>
</a>
</div>
</div>
</div>
</div>
<div class="placeholder"></div>
<!-- // Custom section -->
</main>
<script src="main.js"></script>
</body>
</html>本文地址：https://www.itbaoku.cn/snippets/789800.html