时间戳

首页 > 解决方案 > 在反应中使用 IntersectionObserver 更改滚动标题的样式

javascript - 在反应中使用 IntersectionObserver 更改滚动标题的样式

问题描述

以下代码在简单的 Html 和 JavaScript 中使用 IntersectionObserver 可以很好地根据标题下方部分的可见性来更改标题样式。参考

观察者.js

const header = document.querySelector("header");
const sectionOne = document.querySelector(".home-intro");

const sectionOneOptions = {
  rootMargin: "-200px 0px 0px 0px"
};

const sectionOneObserver = new IntersectionObserver(function(
  entries,
  sectionOneObserver
) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      header.classList.add("nav-scrolled");
    } else {
      header.classList.remove("nav-scrolled");
    }
  });
},
sectionOneOptions);

sectionOneObserver.observe(sectionOne);

上面的observer.js 文件以下面index.html 中引用的元素为目标。

索引.html

<header>…Some nav links</header>

<section class="home-intro">...</section>

<script src="js/observers.js"></script>

现在，我想在我的 React 应用程序中实现这个功能。这里的问题是，在上述实现中，observer(sectionOne)和target(header)都在同一个 html 文件中，但在我的 React 应用程序中，observer(some section 或 div)和target(header)位于它们各自的组件中.

那么，我应该在哪个组件中创建这个 IntersectionObserver - Header(target) 组件或具有 section(observer) 的组件以及如何引用另一个组件？

标签： javascriptreactjsintersection-observer

解决方案

理想情况下，您的 header 和 section 不应该在 react 之外，它应该在第一个被渲染的 react 组件中（通常是 App.js 中的默认组件）。话虽如此，在 React 中，您可以使用Refs获取这些 DOM 节点，然后将其传递给其他 react 组件或钩子以与它们进行交互。

推荐阅读