【发布时间】：2019-09-07 13:24:38
【问题描述】：
我从scroll event 方法开始这个问题，但由于使用IntersectionObserver 的建议，这似乎是更好的方法，我试图让它以这种方式工作。
目标是什么：
我想更改header 的样式（color+background-color），具体取决于通过寻找（我在想？）它的@ 观察到的当前div/section 987654329@ 或 data 将覆盖默认的 header 样式（black on white）。
标题样式：
font-color:
根据内容 (div/section)，默认 header 应该能够将 font-color 更改为仅两种可能的颜色：
- 黑色
- 白色
background-color:
根据内容的不同，background-color 可以有无限的颜色或透明，所以最好单独解决，这些可能是最常用的背景颜色：
- 白色（默认）
- 黑色
- 没有颜色（透明）
CSS：
header {
position: fixed;
width: 100%;
top: 0;
line-height: 32px;
padding: 0 15px;
z-index: 5;
color: black; /* default */
background-color: white; /* default */
}
带有默认标题的 Div/section 示例，内容没有变化：
<div class="grid-30-span g-100vh">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
data-src="/images/example_default_header.jpg"
class="lazyload"
alt="">
</div>
Div/section 示例更改内容标题：
<div class="grid-30-span g-100vh" data-color="white" data-background="darkblue">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
data-src="/images/example_darkblue.jpg"
class="lazyload"
alt="">
</div>
<div class="grid-30-span g-100vh" data-color="white" data-background="black">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1.414 1'%3E%3C/svg%3E"
data-src="/images/example_black.jpg"
class="lazyload"
alt="">
</div>
交叉口观察者方法：
var mq = window.matchMedia( "(min-width: 568px)" );
if (mq.matches) {
// Add for mobile reset
document.addEventListener("DOMContentLoaded", function(event) {
// Add document load callback for leaving script in head
const header = document.querySelector('header');
const sections = document.querySelectorAll('div');
const config = {
rootMargin: '0px',
threshold: [0.00, 0.95]
};
const observer = new IntersectionObserver(function (entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.intersectionRatio > 0.95) {
header.style.color = entry.target.dataset.color !== undefined ? entry.target.dataset.color : "black";
header.style.background = entry.target.dataset.background !== undefined ? entry.target.dataset.background : "white";
} else {
if (entry.target.getBoundingClientRect().top < 0 ) {
header.style.color = entry.target.dataset.color !== undefined ? entry.target.dataset.color : "black";
header.style.background = entry.target.dataset.background !== undefined ? entry.target.dataset.background : "white";
}
}
}
});
}, config);
sections.forEach(section => {
observer.observe(section);
});
});
}
【问题讨论】：
-
你的问题不够清楚。
When entering a page and content (div) has header class added it only changes just after scrolling, but it should change the header directly on entering the page.当页面加载时，您希望页眉背景和文本是什么颜色？你预计它什么时候会改变，变成什么颜色？ -
With absolutely none class determined the background of default header turns or stays transparent after scrolling.我完全不明白这意味着什么。请指定预期的行为以及它与当前行为的不同之处（尤其是颜色，因为这似乎是这里的主要问题）。 -
当您打开项目页面时，您会在某些情况下看到内容（大多数图像设置为 100% 宽度和 100vh 高度），我想添加一个适合内容的类，以便标题/导航保持不变可见，但我现在拥有的代码仅在滚动后才会将标题/导航更改为类
-
它需要在打开页面时读取类，知道要更改标题，然后滚动部分发生，所以当离开该内容时，它返回到默认标题设置黑色在白色背景上而不是黑色透明现在发生的事情。
-
在小提琴中你会看到一个例子：第二部分（section-grey）没有确定类但没有完全返回到默认的标题 css 设置
标签： javascript html css intersection-observer