滚动时如何更改导航栏背景颜色

Question

我想让我的导航栏一开始是透明的，但是当用户滚动时，导航栏会改变颜色/背景颜色。我正在使用引导导航栏并做出反应。

jsx代码：

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';

class Navbar extends Component {
  state = {};

  render() {
    return (
      <nav className="navbar sticky-top navbar-expand-lg ">
        <NavLink
          to="/"
          class="navbar-brand"
          activeClassName="navbar-brand--active"
        >
          Web_Env
        </NavLink>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Create post
              </a>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <NavLink
                to="/login"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Login
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                to="/register"
                className="nav-link"
                activeClassName="nav-link--active"
              >
                Register
              </NavLink>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

export default Navbar;

css代码：

$color1: #aceca1;
$bgcolor1: #629460;
.navbar {
  background-color: $bgcolor1 !important;
  .navbar-brand {
    color: lighten($color1, 10%);
    font-weight: bold;
    font-size: 2em;
    .navbar-brand--active {
      color: white;
      font-weight: bold;
      font-size: 2em;
    }
  }

  .nav-link {
    color: $color1;
    font-size: 1.1em;
    transition: 200ms;
  }
  .nav-link--active {
    color: white !important;
    transform: scale(1.1);
    font-weight: 10px;
  }
  .nav-link:hover {
    color: white !important;
    transform: scale(1.1);
    text-decoration: none !important;
    font-weight: 10px;
  }
}

我在 2 年前看过一篇关于此的帖子，但作为初学者，我并没有真正理解其中的任何内容。如果可能的话，代码旁边的解释会对我很有帮助。

Answer 1

你应该添加这样的东西

componentDidMount() {
    document.addEventListener("scroll", () => {
      const backgroundcolor = window.scrollY < 100 ? "red" : "blue";

      this.setState({ navBackground: backgroundcolor });
    });
  }

到您的代码。

scroll 事件在文档视图或元素被滚动时触发。
检查这个sample

Answer 2

这是一个例子： https://codesandbox.io/s/nifty-newton-f4j0j

你可以使用document.scrollingElement.scrollTop 用于检测用户从页面顶部滚动了多少。 在这种情况下，从顶部算起 120。

您将其放入componentDidMount 并将其保存在一个变量中，以便您稍后可以在ComponentWillUnmount 中删除此侦听器。

因为每次滚动发生时都会触发此侦听器，这有利于获得更好的性能，我们检查状态的值并在必要时更新它。

this.listener = document.addEventListener("scroll", e => {
      var scrolled = document.scrollingElement.scrollTop;
      if (scrolled >= 120) {
        if (this.state.status !== "amir") {
          this.setState({ status: "amir" });
        }
      } else {
        if (this.state.status !== "top") {
          this.setState({ status: "top" });
      }
    }
 });

任何人都需要使用基于功能的组件的解决方案

  let listener = null
  const [scrollState, setScrollState] = useState("top")

  useEffect(() => {
    listener = document.addEventListener("scroll", e => {
      var scrolled = document.scrollingElement.scrollTop
      if (scrolled >= 120) {
        if (scrollState !== "amir") {
          setScrollState("amir")
        }
      } else {
        if (scrollState !== "top") {
          setScrollState("top")
        }
      }
    })
    return () => {
      document.removeEventListener("scroll", listener)
    }
  }, [scrollState])