javascript - 修复导航滚动太远并覆盖内容顶部

Question

我在 React 中创建了一个固定的导航，但是当我单击其上的链接时，窗口滚动得太远并且导航覆盖了内容的顶部。我试图动态计算导航的高度并在滚动中考虑到这一点，但它仍然会出现错误的位置。

import React from 'react'
import { string } from 'prop-types'

class FixedNav extends React.Component {
  constructor(props){
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }

  shouldComponentUpdate (nextProps) {
    return nextProps.navItems !== this.props.navItems
  }

  handleClick (e) {
    const nav = document.querySelector('#fixedNav')
    let navHeight = nav.getBoundingClientRect().height
    let itemLink = document.querySelector(e.target.parentElement.dataset.link)
    let scrollHeight = itemLink.offsetTop - navHeight
    window.scroll(0, scrollHeight)
    window.location.hash = e.target.parentElement.dataset.link
    e.preventDefault()
  }

  createNavItems () {
    const { navItems } = this.props
    return navItems.map((item, key) => {
      const itemLink = items[1].link
      return (
        <li key={key} data-link={itemLink}>
          <a href={itemLink} data-link={itemLink} onClick={this.handleClick}>
            <p>{ items[0] }</p>
          </a>
        </li>
      )
    })
  }

  render () {
    const navItems = this.createNavItems()
    return (
      <div>
        <ul id='side-navigation' className='side-nav'>
          {navItems}
        </ul>
      </div>
    )
  }
}

FixedNav.propTypes = {
  navItems: string.isRequired
}

export default FixedNav

标签： javascriptreactjs