如何在react.js中更改滚动条上的文本颜色

pxy2qtax 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(297)

您好，我对在react.js中更改滚动条上的文本颜色有一些问题，我不确定这里缺少什么，但只需将h4文本默认为白色，如果在滚动条上，则应更改为黑色

import React, {useState, useEffect} from 'react';
import './Navbar.css';
import {Navbar, Container, Nav} from 'react-bootstrap';

const Navigation = () =>{
    const [navbar, setNavbar] = useState(false);
    const [white, setColor] = useState(false);

    const changeBackground = () => {
        if(window.scrollY >= 80){
            setNavbar(true)
        }else{
            setNavbar(false)
        }
    }

    const changeColor = () => {
        if(window.scrollY >= 80){
            setColor(true)
        }else{
            setColor(false)
        }
    }

    window.addEventListener('scroll',changeBackground);
    window.addEventListener('black',changeColor);

    return(
        <Navbar className={navbar ? 'scroll' : 'navbar'} expand="lg">
            <Container>
                <Navbar.Brand href="#home"><h4 className={white ? 'black' : 'white'}>Brand</h4></Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#projects">Tab1</Nav.Link>
                        <Nav.Link href="#blog">Tab2</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
                <Navbar.Collapse className="justify-content-end">
                    <Nav>
                        <Nav.Link href="#contact">Tab3</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
};

export default Navigation;

这是css文件

.navbar {
    width: 100%;
    background-color: transparent;
    display: flex;
    position: fixed;
    top: 0;
    min-height:6vh;
    justify-content: space-between;
    transition: background-color 0.4s ease-out;
    flex-direction: row;
}

.black {
    color: #000000;
}

.white {
    color: #FFFFFF;
}

.scroll {
    background-color: #FFFFFF;
}

我如何才能正确执行此操作？还是我真的错过了什么？

JavaScript reactjs

来源：https://stackoverflow.com/questions/68332645/how-to-change-text-color-on-scroll-in-react-js

2条答案

按热度按时间

m4pnthwp1#

我更新了你的代码如下。如果我们在每个渲染上注册函数，它将影响内存泄漏。因此，我将追加事件侦听器插入到useeffect中，而没有依赖项（与ComponentDidMount和componentwillunmount的情况相同）
在我看来，上面代码中最重要的更新部分黑色事件是不可理解的，所以我添加了函数scroll event。

import React, { useEffect, useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './Navigation.css';

const Navigation = () => {
  const [navbar, setNavbar] = useState(false);
  const [color, setColor] = useState(false);

  const changeBackground = () => {
    if (window.scrollY >= 80) {
      setNavbar(true);
      setColor('black');
    } else {
      setNavbar(false);
      setColor('white');
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', changeBackground, true);
    return () => window.removeEventListener('scroll', changeBackground);
  }, []);

  return (
    <Navbar
      className={navbar ? 'scroll' : 'navbar'}
      expand='lg'
      style={{
        position: 'fixed',
        backgroundColor: 'white',
      }}
    >
      <Container>
        <Navbar.Brand href='#home'>
          <h4 className={color}>Brand</h4>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav'>
          <Nav className='me-auto'>
            <Nav.Link href='#projects'>Tab1</Nav.Link>
            <Nav.Link href='#blog'>Tab2</Nav.Link>
          </Nav>
        </Navbar.Collapse>
        <Navbar.Collapse className='justify-content-end'>
          <Nav>
            <Nav.Link href='#contact'>Tab3</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Navigation;

截图
https://i.imgur.com/n3fpyge.png
https://i.imgur.com/x1ycdky.png

赞(0）回复(0）举报 2021-09-13

dy2hfwbg2#

应该更改颜色的事件侦听器附加到错误的事件。它应该附在 scroll 事件

window.addEventListener('black',changeColor); // incorrect event name 'black'

// Change to 
window.addEventListener('scroll',changeColor);

赞(0）回复(0）举报 2021-09-13

我来回答

如何在react.js中更改滚动条上的文本颜色

2条答案

相关问题

热门标签

最新问答