itsdouges/react-sticky-header

Uncaught TypeError: Cannot read property 'offsetHeight' of null at index.js:48

Opened this issue · 0 comments

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;