滚动到 React.js 中的某个部分时突出显示菜单项

Question

Cannot solve that one. I'm creating navigation bar with a scroll-to functionality, ie. when pressed on the certain menu item the page is scrolled to the corresponding section. While this seems to be quite straightforward I don't know how to highlight in a different colour this certain menu item when window gets to the point of the section. F.ex. user presses 'contact', the page is scrolled to contact section, the contact menu item changes its colour to red. Thank you for any help!

Here's my code:

import React, { Component } from 'react';
import Container from './Container.jsx';

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: 'rgba(34,34,34,0)',
        };
    }

    componentDidMount() {
        window.addEventListener('scroll', () => this.handleScroll());
    }

    handleScroll(e) {
        const test = (pageYOffset > 900) ? 
        (this.setState({ backgroundColor: 'black' })) : 
        (this.setState({ backgroundColor: 'rgba(34,34,34,0)' }));
    }

    handleClick(e) {
        e.preventDefault();       
        const elementOffsetTop = document.getElementById(e.target.innerText).offsetTop;
        window.scrollTo(0, elementOffsetTop);
    }

    handleUp(e) {
        e.preventDefault();
        window.scrollTo(0, 0);
    }

    render() {
        const menuItems = [
            { menuItem: 'O nas', link: 'About' },
            { menuItem: 'Księgowość', link: 'Ksiegowosc' },
            { menuItem: 'Kadre i płace', link: 'Kadre' },
            { menuItem: 'Doradztwo', link: 'Doradztwo' },
            { menuItem: 'Nieruchomości', link: 'nieruchomosci' },
            { menuItem: 'Kontakt', link: 'kontakt' }
        ];

        const items = menuItems.map(item => {
            const styles = {
                linkStyle: {
                    textDecoration: 'none',
                    color: '#ffffff',
                    cursor: 'pointer'
                },
                textStyle: {
                    marginLeft: '1rem',
                    textTransform: 'uppercase'
                }
            };

            const { linkStyle, textStyle } = styles;

            return (
                <a onClick={e => this.handleClick(e)} key={item.link} style={linkStyle}>
                    <p style={textStyle}> {item.menuItem} </p>
                </a>
            );
        });

        const styles = {
            containerStyle: {
                height: 70,
                position: 'fixed',
                top: 0,
                width: '100%',
                backgroundColor: this.state.backgroundColor,
                zIndex: 20000,

            },
            headerStyle: {
                height: 70,
            },
            navigationStyle: {
                height: '100%',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                fontSize: '0.9rem'
            },
            navigationItemsStyle: {
                display: 'flex',
            },
            logoStyle: {
                fontSize: '1.3rem',
                cursor: 'pointer'
            }

        };
        const { headerStyle, 
            containerStyle, 
            navigationStyle, 
            navigationItemsStyle, 
            logoStyle
            } = styles;

        return (
            <div id="header" style={containerStyle}>
                <header style={headerStyle} ref='header'> 
                    <Container>
                        <div style={navigationStyle}>   
                            <a onClick={e => this.handleUp(e)} style={logoStyle}>
                                <div>{this.props.text}</div>
                            </a>
                            <div style={navigationItemsStyle}> {items} </div>
                        </div>
                    </Container>
                </header>
            </div>
        );
    }
}

export default Header;

Answer 1

you can use react-intersection-observer to achieve that. More info about that on react-intersection-observer