Uncaught TypeError: Cannot read property 'offsetHeight' of null at index.js:48
Opened this issue · 0 comments
dushajni commented
Sticky header works but I'm getting this error on each reload:
Uncaught TypeError: Cannot read property 'offsetHeight' of null
at index.js:48
it's this part of the code:
requestAnimationFrame(function () {
var stickyHeaderHeight = _this._fixed.offsetHeight;
Implementation of your code:
import 'react-sticky-header/styles.css';
import StickyHeader from 'react-sticky-header';
class Header extends React.Component {
state = {
sticked: false,
};
changeSticked = isSticky => {
this.setState({sticked: isSticky});
}
render() {
const logo = require("../../images/logo_v2.svg");
const logoSmall = require("../../images/logo_v1.svg");
return (
<StickyHeader
// This is the sticky part of the header.
onSticky={(sticky) => {
this.changeSticked(sticky);
}}
header={
<div className="header-root">
<div className="mini-header__logo"><img className="main-logo" src={this.state.sticked ? logoSmall : logo} alt=""/>
</div>
<div className="mini-header__entry-switch">
<ul className="header_menu t-primary-14 t-weight-b">
<Link className="header-link" to="/about">About</Link>
<Link className="header-link" to="/faq">FAQs</Link>
<Link className="header-link" to="/contact">Contact us</Link>
</ul>
<Link className="mui-button" to="/registration">Sign Up</Link>
</div>
</div>
}
>
<section>
<p style={{height: '200px', backgroundColor: '#ff00ff'}}>
This section will be what the sticky header scrolls over before entering into
sticky state. See the gif above or run the test story book to see examples.
</p>
</section>
</StickyHeader>
)
}
};
export default Header;