You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 24, 2021. It is now read-only.
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;
Sticky header works but I'm getting this error on each reload:
it's this part of the code:
Implementation of your code: