Question

你好，我是新手，我想在滚动时将导航的文本颜色更改为白色，为此我做了以下

useEffect(() => {
    const header = document.getElementById("myHeader");
    const navText = document.getElementById("onScroll");
    const sticky = header.offsetTop;
    const stickyNav = navText.offsetTop;

const scrollCallBack = window.addEventListener("scroll", () => {
  if (window.pageYOffset > sticky ) {
    header.classList.add("sticky");
    navText.className("navText");
    
  } else {
    header.classList.remove("sticky");
    navText.classList.remove("navText");
    
  }
});

这是我的导航代码

<div class="navbar-nav">
              <Link to="/" id="onScroll" className={`nav-item nav-link ${className}`}>
                Home
              </Link>
              <Link to="/service" id="onScroll"  className={`nav-item  nav-link ${className}`}>
                Services
              </Link>
              <a href="#" id="onScroll" className={`nav-item nav-link ${className}`}>
                About
              </a>
              <Link to="/works" id="onScroll" className={`nav-item nav-link ${className}`}>
                How it works
              </Link>
              <Link href="#" to="/covid" id="onScroll" className={`nav-item nav-link ${className}`}>
                COVID
              </Link>
            </div>

但在 UI 上只有一个文本（主页）改变它的颜色我希望所有文本都改变颜色而不使用 jquery

这是我的 css

.nav-color {
  font-family: "Source Sans Pro";
  font-weight: 600;
  text-align: left;
  color: #12356a !important;
}
.sticky {
  width: 100% !important;
  top: 0;
  z-index: 2  !important;
  background: #12356a;
  position: fixed !important;
}

Answer 1

我已经用这种方法解决了，希望对别人有帮助

const [isSticky, setSticky] = useState(false);
  useEffect(() => {
    const scrollCallBack = window.addEventListener("scroll", () => {
      if (window.pageYOffset > 0 ) {
        setSticky(true)        
      } else {
        setSticky(false)       
      }
    });
    return () => {
      window.removeEventListener("scroll", scrollCallBack);
    };
  }, []);
<Link to="/"  className={`nav-item nav-link ${isSticky? "navText": null} `}>

在反应中更改滚动时的导航栏文本颜色

1 个答案: