如何在React中的页面滚动上突出显示导航栏链接

如何解决如何在React中的页面滚动上突出显示导航栏链接

我在Codepen https://codepen.io/dbilanoski/pen/LabpzG?editors=1010中找到了一个我想在我的React Application中要做的例子。当我向下滚动页面时，应在导航栏中突出显示该部分，该部分位于页面顶部。我的应用程序是一个页面，其中包含大约5到6个部分，这些部分将是索引/内联页面，因此当用户向下滚动时，会将其带到下一部分。我应该采取什么方法来合并这个？更具体地说，我应该只使用React，还是应该实现React Router Dom？从最一般的意义上讲，完成此功能的最佳方法是什么？

App 

import React,{Component} from 'react';
import Footer from './components/footer/Footer';
import Hero from './components/hero/Hero';
import Resume from './components/resume/Resume';
import About from './components/about/About';
import Contact from './components/contact/Contact';
import Navbar from './components/navbar/Navbar';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {

    }
  }

  componentWillMount() {
    window.addEventListener('scroll',this.navHighlighter);
  }

  navHighlighter() {}

  render() {
    return (
      <div className="App">
        <Navbar />
        <Hero/>
        <About/>
        <Resume/>
        <Contact/>
        <Footer/>
      </div>
    );
  }
}

Navbar 

mport React,{Component} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faBars } from '@fortawesome/free-solid-svg-icons'
import './navbar.css';

class Navbar extends Component {
    constructor() {
        super();
        this.state = {
            addClass: '',showMenu: ''
        }
        this.handleScroll = this.handleScroll.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);
    }

    componentDidMount() {
        window.addEventListener("scroll",this.handleScroll)
    }

    handleScroll() {
        if (window.scrollY > 0) {
            this.setState({addClass: 'sticky'})
        } else {
            this.setState({addClass: ''})
        }
    }

    toggleMenu() {
        let { showMenu } = this.state;
        this.setState({showMenu: showMenu === 'open' ? '' : 'open'})
    }

    render() {
        return (
            <div>
                <header onScroll={this.handleScroll} className={this.state.addClass}>
                    <a href="#" className="logo">Jeremy</a>
                    <nav className={this.state.showMenu}>
                        <ul>
                            <li><a href="#" className="active">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#skills">Skills</a></li>
                            <li><a href="#projects">Projects</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                    <div className="menu-toggle" onClick={this.toggleMenu}><FontAwesomeIcon className='icon' icon={faBars} /></div>
                </header>
            </div>
        );
    }
}

export default Navbar;

解决方法

您可以将<NavLink />与activeClassName属性一起使用。

<NavLink to="#about" activeClassName={"active"} className={"anything"}>About</NavLink>

,

我也有同样的确切问题，这就是我的实现方式。

1. 为您的每个部分创建前向引用。
2. 在onScroll事件处理程序中，创建使导航项处于活动状态的逻辑。使用先前创建的参考来访问您的部分的高度属性。
3. 设置导航项目的活动/非活动状态。就我而言，我制作了导航项目的引用，并直接通过它们来编辑类，而不是依赖状态，因为我想防止每次滚动时都重新渲染。

const aboutRef = useRef();

useEffect(() => {
        const handleScroll = (e) => {
            if (window.scrollY >= 0 && window.scrollY <= window.innerHeight / 2) {
                // Set states for nav items here if the user is on the first section
            } else if (aboutRef.current.offsetTop - window.scrollY < window.innerHeight / 2 && stuffRef.current.offsetTop - window.scrollY >= window.innerHeight / 2) {
                // For the about section
            } else {
                // Etc...
            }
        }
        document.addEventListener('scroll',handleScroll);
        return () => {
            document.removeEventListener('scroll',handleScroll);
        }
    },[])

return (
    <nav>
        ...

        <li className={stateActiveAbout ? 'active' : 'not-active'}>About</li>
        ...

    </nav>

    <About ref={aboutRef} .../>
)

某种效果。我确定可以改进代码，但希望您能理解。上面是一个功能组件，因此您必须进行转换。

我不太确定这种方法是否违反了任何React“规则”，但是否可行。

,

为您需要跟踪的每个部分创建 refs 说 sampleRef。使用 sampleRef，您可以使用 sampleRef.current.offsetTop 获得部分的位置。这给出了页面中元素的绝对位置。 要获取页面位置，请使用 window.scrollY。然后您可以将所有部分的 offsetTop 与 scrollY 进行比较。 offsetTop 和 scrollY 之间差异最小的部分是活动部分。 发现我用分治法来优化比较方法。

我创建了一个代码并选中它here。在那里你可以签出文件 ScrollHighlightNabbar.js

,

我得到的最好和最简单的方法是：

• 首先：在 Html 和 body 标签中添加一个 CSS 属性 scroll-behaviour:smooth;，这将使点击部分 HashLink 时滚动平滑。

• 第二：导航链接的自动突出显示可以通过使用 react-scrollspy-highlight 包来完成，它将完美地完成任务。转到 https://www.npmjs.com/package/react-scrollspy-highlight 获取文档。