Javascript 当导航条到达下一个div时，如何更改导航条的颜色

有没有办法让标题在到达下一个div时更改颜色？我试图让它的导航栏颜色变化时，滚动到下一个div容器

像这样的

container.addEventListener('scroll', e => {
  if (container.scrollTop > someChildElement.offsetTop) {
    changeColor(navbar);
  }
});

像这样的

container.addEventListener('scroll', e => {
  if (container.scrollTop > someChildElement.offsetTop) {
    changeColor(navbar);
  }
});

---

就像@neaumusic已经回答了一样，添加一个滚动事件监听器也会有所帮助

下面是我编写的一个工作代码：

我喜欢做的是将事件侦听器分离到自定义挂钩

import { useEffect, useState, useRef, RefObject } from "react";

interface ITopBottom {
  top: number;
  bottom: number;
}

const useElementLocation = <T extends HTMLElement>(): [
  RefObject<T>,
  ITopBottom
] => {
  // ref object to return
  const ref = useRef<T>(null);

  // you can customize this to include width, height, etc.
  const [loc, setLoc] = useState<ITopBottom>({ top: 0, bottom: 0 });

  useEffect(() => {
    const listener = () => {


      const rect = ref.current?.getBoundingClientRect()
      if(rect){

        setLoc({
          top:rect.top,
          bottom: rect.bottom,
        })
      }
    };

    // add the listener as the component mounts
    window.addEventListener("scroll",listener)

    // guarantee the listener is executed at least once
    listener();

    // clean up
    return ()=>window.removeEventListener("scroll",listener)
  }, []);
  return [ref,loc]
};

export default useElementLocation;

这个钩子返回一个要放置在div中的ref对象，以及您需要的相应位置

现在您知道了边界的顶部和底部位置，使用逻辑语句确定标头是否已达到目标div，并根据结果更改颜色

import React, {useState, useEffect} from 'react'
import useElementLocation from "./useElementLocation"

export default () => {
  const [headerRef, headerLoc] = useElementLocation<HTMLDivElement>();
  const [divRef, divLoc] = useElementLocation<HTMLDivElement>();

  const [headerColor, setHeaderColor] = useState("white"); // default color

  useEffect(()=>{
    const {bottom: headerBottom} = headerLoc;
    const {top,bottom} = divLoc;
    if(top<headerBottom && headerBottom<bottom){
      // header has reached the div
      setHeaderColor("black");
    } else {
      // header has left the div, either to the higher or lower
      setHeaderColor("white");
    }
  },[divLoc, headerLoc]) //dependencies

  return <div className="app">
    <div className="header" style={{backgroundColor: headerColor}} ref={headerRef}></header>
    <div className="div-to-watch" ref={divRef}></div>
  </div>
}

---

就像@neaumusic已经回答了一样，添加一个滚动事件监听器也会有所帮助

下面是我编写的一个工作代码：

我喜欢做的是将事件侦听器分离到自定义挂钩

import { useEffect, useState, useRef, RefObject } from "react";

interface ITopBottom {
  top: number;
  bottom: number;
}

const useElementLocation = <T extends HTMLElement>(): [
  RefObject<T>,
  ITopBottom
] => {
  // ref object to return
  const ref = useRef<T>(null);

  // you can customize this to include width, height, etc.
  const [loc, setLoc] = useState<ITopBottom>({ top: 0, bottom: 0 });

  useEffect(() => {
    const listener = () => {


      const rect = ref.current?.getBoundingClientRect()
      if(rect){

        setLoc({
          top:rect.top,
          bottom: rect.bottom,
        })
      }
    };

    // add the listener as the component mounts
    window.addEventListener("scroll",listener)

    // guarantee the listener is executed at least once
    listener();

    // clean up
    return ()=>window.removeEventListener("scroll",listener)
  }, []);
  return [ref,loc]
};

export default useElementLocation;

这个钩子返回一个要放置在div中的ref对象，以及您需要的相应位置

现在您知道了边界的顶部和底部位置，使用逻辑语句确定标头是否已达到目标div，并根据结果更改颜色

import React, {useState, useEffect} from 'react'
import useElementLocation from "./useElementLocation"

export default () => {
  const [headerRef, headerLoc] = useElementLocation<HTMLDivElement>();
  const [divRef, divLoc] = useElementLocation<HTMLDivElement>();

  const [headerColor, setHeaderColor] = useState("white"); // default color

  useEffect(()=>{
    const {bottom: headerBottom} = headerLoc;
    const {top,bottom} = divLoc;
    if(top<headerBottom && headerBottom<bottom){
      // header has reached the div
      setHeaderColor("black");
    } else {
      // header has left the div, either to the higher or lower
      setHeaderColor("white");
    }
  },[divLoc, headerLoc]) //dependencies

  return <div className="app">
    <div className="header" style={{backgroundColor: headerColor}} ref={headerRef}></header>
    <div className="div-to-watch" ref={divRef}></div>
  </div>
}

---

我不熟悉typescript，雪人也用javascript制作了同样的应用程序。你可以检查一下，我不熟悉typescript，雪人也用javascript制作了同样的应用程序。你可以查一下