Header component is not sticking on top

[c0debreaker]

I can't figure out why I can't get it to work. If I scroll down, the value of top attribute keeps on decrementing. Header won't stay fixed on top. What am I doing wrong?

My header component component/Header/index.js

import React, { Component } from 'react';

class Header extends Component {
  static defaultProps = {
    className: ""
  };
  render() {
    const { style, renderCount, className } = this.props;
    return (
      <div className={"header " + className} style={style}>
        <div className="fh5co-main-nav">
          <div className="container-fluid">
            <div className="fh5co-menu-1">
              <a href="home" data-nav-section="home">Home</a>
              <a href="about" data-nav-section="about">About</a>
              <a href="features" data-nav-section="features">Features</a>
            </div>
            <div className="fh5co-logo">
              <a href="index.html">foodee</a>
            </div>
            <div className="fh5co-menu-2">
              <a href="menu" data-nav-section="menu">Menu</a>
              <a href="events" data-nav-section="events">Events</a>
              <a href="reservation" data-nav-section="reservation">Reservation</a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Header;

and my Sticky component code

class App extends Component {
  render() {
    return (
      <div>
        <div className="App" id="fh5co-container">
          <Home/>
          <StickyContainer>
            <Sticky>
              {({style}) => (
                <Header style={style}></Header>
              )}
            </Sticky>
          </StickyContainer>
          <Contacts/>
        </div>
        <Footer/>
      </div>
    );
  }
}

Here is the screenshot - https://i.imgur.com/JdKAwYs.png

[c0debreaker]

Found a solution. I put this in componentDidMount of my Header component.

    var header = document.getElementById("myHeader");
    var sticky = header.offsetTop;

    function myFunction() {
      debugger;
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }

in my App.js, I called it like this

          <div className="header" id="myHeader">
            <Header/>
          </div>

[vcarl]

Hi @c0debreaker this is for reporting bugs, I can't help you with every issue you run into while implementing! I helped out with your first issue because I quickly noticed the problem. There's a react chatroom called Reactiflux that might be able to help, http://join.reactiflux.com

[vcarl]

I'd also like to point out that the issue template specifically says as much :) Please read those before filing issues!

[c0debreaker]

Thank you vcarl. Will do next time. Apology.