React 中的粘性导航栏答案

【问题标题】：sticky navbar in ReactReact 中的粘性导航栏
【发布时间】：2022-01-18 21:16:00
【问题描述】：

我需要带上粘性标题。当用户滚动时，我需要添加这个粘性标题。我保持偏移量大于 200 并添加了相应的 css 代码。虽然我正在调试代码偏移量打印正确，但滚动站点没有被附加。任何人都可以指导我做错了什么。下面我添加了样式和逻辑。提前致谢！

JSX:

import React, { useState, useEffect } from "react"
import "../styles/global.css"

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false)

  const handleScroll = () => {
    const offset = window.scrollY
    console.log("OFFSET VALUE", offset)
    if (offset > 200) {
      setScrolled(true)
    } else {
      setScrolled(false)
    }
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
  })

  let x = ["site-header"]

  if (scrolled) {
    x.push("scrolled")
  }

  return (
    <>
      <header className={x.join("")}>
        <div className="wrapper site-header__wrapper">
          <h2 className="brand">Community Site</h2>
          <nav className="nav">
            <div className="nav__wrapper">
              <Link className="nav__item" to="/Home">
                <h3> Home</h3>
              </Link>
              <Link className="nav__item" to="/Aboutus">
                <h3>What are we</h3>
              </Link>
              <Link className="nav__item " to="/Contactus">
                <h3>Contact Us</h3>
              </Link>
            </div>
          </nav>
        </div>
      </header>
    </>
  )
}

   

 CSS:
    
    .site-header {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      /* position: relative;
      overflow: hidden; */
      padding: 15px 10px;
      background-color: white;
      border: 1px white;
      transition: all 0.12s ease;
    }
    
    .scrolled {
      position: sticky;
      top: 0;
      left: 0;
      background-color: red;
    }
    .site-header__wrapper {
      padding-top: 4rem;
      padding-bottom: 6rem;
    }
    @media (min-width: 600px) {
      .site-header__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
        padding-bottom: 15px;
      }
    }
    @media (min-width: 600px) {
      .nav__wrapper {
        display: flex;
        gap: 12px;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 0;
      }
    }

【问题讨论】：

x.join("") 应该是带有空格的 x.join(" ")

标签： javascript css reactjs react-hooks

【解决方案1】：

你可以试试这个代码。

const [scrolling, setScrolling] = useState(false);
  const [scrollTop, setScrollTop] = useState(0);
  useEffect(() => {
    const onScroll = (e) => {
      setScrollTop(e.target.documentElement.scrollTop);
      if(scrollTop > 200) {
        setScrolling(true)
      };
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [scrollTop, scrolling]);

【讨论】：

【解决方案2】：

我进行了一些测试，我想我知道会发生什么，你有 x.join("") 类，但是我手动添加了 "site-header"，它还通过添加内联样式来工作

<header
    className={site-header'}
    style={scrolled ? { opacity: "1" } : { opacity: "0" }}
  >

我还修改了站点标题，添加了position: fixed; top: 0

如果你想通过添加类来达到相同的效果，我建议你使用像opacity或transform: translateY()这样的属性并添加一些过渡

【讨论】：