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" });
      }
    }
 });```

滚动时如何在反应中更改导航栏背景颜色

2 个答案: