reactjs - 在 ReactJS 静态 Web 应用程序中滚动时平滑标题过渡

Question

我是 React JS 的新手。无论如何，我能够创建自己的以下 Web 应用程序。

我的代码按我的需要工作，但有一个小问题。接头以坚固的方式收缩和膨胀（振动很小）。这个过程并不顺利。我想你也可以在我上面提供的 gif 图像中注意到它。我需要使过渡顺利。如何修改我的代码以实现我的目标？

这是我在向下滚动页面 50 像素时用来缩小标题的功能。

const [headerShrinked, setHeaderShrinked] = useState(false);
useEffect(() => {
  function resizeHeaderOnScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop;
    const shrinkOn = 50;

    if (distanceY > shrinkOn) {
      setHeaderShrinked(true);
    } else {
      setHeaderShrinked(false);
    }
  }

  window.addEventListener("scroll", resizeHeaderOnScroll);
}, []);

这是链接到它的外部CSS代码。

.header {
    font-size: 55px;
    font-weight: 600;
    height: 70px;
    letter-spacing: 1px;
    padding-right: 40px;
    padding-top: 0px;
}

.droplinks {
    font-family: Arial;
    font-size: 20px;
    font-weight: 300;
    color: black;
    position: relative;
    text-align: center;
}

.header {
    height: 70px;
    padding-right: 40px;
    padding-top: 0px;
    position: relative;
    transition: height 0s linear 0.5s;
}

.header.shrinked {
    height: 50px;
}

.headerBrand {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: font-size 0.5s;
}

.headerBrand.shrinked {
    font-size: 30px;
}

.navlinks {
    font-family: Arial;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 2px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    text-align: center;
}

.navlinks:hover {
    color: #ffffff;
    text-shadow: 0px 0px 60px #ffffff;
    transition: all 0.2s ease-in;
}

这是完整的Js 代码。

import React, { useEffect, useState } from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { Link } from 'react-router-dom';

import styles from "./Header.module.css";

const Header = (props) => {
    const [headerShrinked, setHeaderShrinked] = useState(false);
    useEffect(() => {
        function resizeHeaderOnScroll() {
            const distanceY = window.pageYOffset || document.documentElement.scrollTop;
            const shrinkOn = 50;

            if (distanceY > shrinkOn) {
                setHeaderShrinked(true);
            } else {
                setHeaderShrinked(false);
            }
        }

        window.addEventListener("scroll", resizeHeaderOnScroll);
    }, []);

    return (
        <Navbar sticky="top" collapseOnSelect expand="lg"  bg="dark" variant="dark">
            <Navbar.Brand className={`${styles.headerBrand} ${headerShrinked ? styles.shrinked : ""}`}>
                <Link to="/">
                    MyWebApp
                </Link>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">
                    <NavDropdown title="Get to Know Us" id="collasible-nav-dropdown" className={styles.navlinks}>
                        <div className={styles.dropboard}>
                            <NavDropdown.Item className={styles.droplinks}>
                                <Link to="ourstory">
                                    Our Story
                                </Link>
                            </NavDropdown.Item>
                            <NavDropdown.Item className={styles.droplinks}>
                                <Link to="about">
                                    About Us
                                </Link>
                            </NavDropdown.Item>
                            <NavDropdown.Divider/>
                            <NavDropdown.Item className={styles.droplinks}>
                                <Link to="newtrends">
                                    New Trends
                                </Link>        
                            </NavDropdown.Item>
                        </div>
                    </NavDropdown>
                </Nav>
                <Nav>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="/">
                            Home
                        </Link>
                    </Nav.Link>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="features">
                            Features
                        </Link>
                    </Nav.Link>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="screenshots">
                            Screenshots
                        </Link>
                    </Nav.Link>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="pricing">
                            Pricing
                        </Link>
                    </Nav.Link>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="faqs">
                            FAQs
                        </Link>
                    </Nav.Link>
                    <Nav.Link className={styles.navlinks}>
                        <Link to="blog">
                            Blog
                        </Link>
                    </Nav.Link>
                    <Nav.Link eventKey={2} className={styles.navlinks}>
                        <Link to="contact">
                            Contact
                        </Link>
                    </Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
};

export default Header;

标签： reactjs