Tag: covers

I have a fixed browser that I created in React, but when I click on a link, the window scrolls too much and the browser covers the top of the content. I have tried to dynamically calculate the height of the navigation and take this into account in the displacement, but it still goes to the wrong position.

import react from & # 39; react & # 39;
import {string} from & # 39; prop-types & # 39;

The FixedNav class extends React.Component {
constructor (accessories) {
super (accessories)

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

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

handleClick on (e) {
const nav = document.querySelector (& # 39; # fixedNav & # 39;)
we go to navHeight = nav.getBoundingClientRect (). height
leave itemLink = document.querySelector (e.target.parentElement.dataset.link)
leave scrollHeight = itemLink.offsetTop - navHeight
window.scroll (0, scrollHeight)
window.location.hash = e.target.parentElement.dataset.link
e.preventDefault ()
}

createNavItems () {
const {navItems} = this.props
returns navItems.map ((item, key) => {
const itemLink = items[1].link
he came back (
        

          
            
{ articles[0] }
          
        
      
      
      
      )
})
}

render () {
const navItems = this.createNavItems ()
he came back (
      

        

          
          
          
          {navItems}
        
      
    
    
    
    )
}
}

FixedNav.propTypes = {
Nav Articles: string.isRequired
}

default export FixedNav