React - 向下滚动页面时缩小导航图像答案

【问题标题】：React - Shrink nav image on scroll down of the pageReact - 向下滚动页面时缩小导航图像
【发布时间】：2021-04-14 16:07:23
【问题描述】：

我目前已经按照我的意愿设置了导航，我希望徽标图像在用户向下滚动页面时从 91 像素缩小到 60 像素，然后在他们位于顶部时重新增长到 91 像素.我在网上看到了一些问题，但它们似乎都不起作用或对于我想要的解决方案来说足够具体。任何帮助将非常感激。 用我从这个问题的代码和坑的尝试更新了我的代码 - Resize Header onscroll React

当我向下滚动时出现此错误 -

TypeError: headerEl 为空

import React, { Component } from "react";
import logo from "../images/sdrlogo.jpeg";
import { FaAlignRight } from "react-icons/fa";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  state = {
    isOpen: false,
  }
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  componentDidMount() {
    window.addEventListener("scroll", this.resizeHeaderOnScroll);
  }
  resizeHeaderOnScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 200,
      headerEl = document.getElementById("js-header");

    if (distanceY > shrinkOn) {
      headerEl.classList.add("smaller");
    } else {
      headerEl.classList.remove("smaller");
    }
  }

  render() {
    return <nav className="navbar">
      <div class="nav-center">
        <div class="nav-header">
          <Link to="/">
            <img className="logo" src={logo} alt="Derby Golf Centre" />
          </Link>
          <button type="button" className="nav-btn" onClick={this.handleToggle}>
            <FaAlignRight className="nav-icon" />
          </button>
        </div>
        <ul className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/lesson">Book a Lesson</Link>
          </li>
          <li>
            <Link to="/opening-times">Opening Times</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          <li>
            <Link to="/driving-range">Driving Range</Link>
          </li>
        </ul>
      </div>
    </nav>;
  }
}

【问题讨论】：

你试过什么？您尝试过的解决方案有什么问题？
我尝试使用 javascript 在静态站点上实现一个解决方案，但我不知道如何将它引入 React。我看过这个，但似乎无法让它工作......stackoverflow.com/questions/50520455/…

标签： javascript reactjs

【解决方案1】：

所以，我花了一些时间浏览了代码。我错过了codesandbox上的CSS文件，我修改了我的代码并使用getElementbyID，我将标志从一个类更改为一个ID，然后使用它。在 CSS 中，我创建了一个名为 logoShrink 的类，并为两者添加了过渡。

  .logoShrink {
  height: 60px !important;
  transition: 0.5s;
}

如果有人打扰，代码如下！

import React, { Component } from "react";
import logo from "../images/sdrlogo.jpeg";
import { FaAlignRight } from "react-icons/fa";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  state = {
    isOpen: false,
  }
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  componentDidMount() {
    window.addEventListener("scroll", this.resizeHeaderOnScroll);
  }
  resizeHeaderOnScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("logo");

    if (distanceY > shrinkOn) {
      headerEl.classList.add("logoShrink");
    } else {
      headerEl.classList.remove("logoShrink");
    }
  }

  render() {
    return <nav className="navbar">
      <div class="nav-center">
        <div class="nav-header">
          <Link to="/">
            <img id="logo" src={logo} alt="Derby Golf Centre" />
          </Link>
          <button type="button" className="nav-btn" onClick={this.handleToggle}>
            <FaAlignRight className="nav-icon" />
          </button>
        </div>
        <ul className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/lesson">Book a Lesson</Link>
          </li>
          <li>
            <Link to="/opening-times">Opening Times</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          <li>
            <Link to="/driving-range">Driving Range</Link>
          </li>
        </ul>
      </div>
    </nav>;
  }
}

【讨论】：