I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view. This is the package: I am not sure if I am using the StickyContainer or Sticky pnents correctly. I am actually a bit confused about the "style" prop you're supposed to pass to the Sticky container.

If anyone can help, will be much appreciated. Thanks!

Here's the code for App.js:

import React, { Component } from 'react';
import './App.css';
import Header from './ponents/Header';
import Footer from './ponents/Footer';
import HomePage from './ponents/pages/HomePage';
import OurWork from './ponents/pages/OurWork';
import ContactUs from './ponents/pages/ContactUs';
import { BreakpointProvider } from 'react-socks';
import { StickyContainer, Sticky } from "react-sticky";
import { setDefaultBreakpoints } from 'react-socks';

setDefaultBreakpoints([
  { small: 0 },
  { medium: 700 }
]);

class App extends Component {
  pageStyle = {
    display: 'flex',
    flexDirection: 'column'
  }

  render() {
    return (
      <BreakpointProvider>
        <StickyContainer>
          <div className="App">
            <Sticky>
              {({style}) => <Header style={style}/>}
            </Sticky>
            <div className="page" style={this.pageStyle}>
                <HomePage />
              <OurWork />
              <ContactUs />
            </div>
          <Footer />
        </div>
        </StickyContainer>
      </BreakpointProvider>
    );
  }
}

export default App;

Here is the Header ponent:

import React, { Component } from 'react';
import Logo from './Logo'
import NavBar from './NavBar';
import logo from '../images/transparent.png';

class Header extends Component {
    headerStyle = {
        height: 100,
        margin: 20,
        display: 'flex',
        justifyContent: 'space-between',
        zIndex: 10
    };

    render() {
        return (
            <div className="header" style={this.headerStyle}>
                <Logo logo={logo}/>
                <NavBar />
            </div>
        );
    }

};

export default Header;

I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view. This is the package: https://www.npmjs./package/react-sticky I am not sure if I am using the StickyContainer or Sticky pnents correctly. I am actually a bit confused about the "style" prop you're supposed to pass to the Sticky container.

If anyone can help, will be much appreciated. Thanks!

Here's the code for App.js:

import React, { Component } from 'react';
import './App.css';
import Header from './ponents/Header';
import Footer from './ponents/Footer';
import HomePage from './ponents/pages/HomePage';
import OurWork from './ponents/pages/OurWork';
import ContactUs from './ponents/pages/ContactUs';
import { BreakpointProvider } from 'react-socks';
import { StickyContainer, Sticky } from "react-sticky";
import { setDefaultBreakpoints } from 'react-socks';

setDefaultBreakpoints([
  { small: 0 },
  { medium: 700 }
]);

class App extends Component {
  pageStyle = {
    display: 'flex',
    flexDirection: 'column'
  }

  render() {
    return (
      <BreakpointProvider>
        <StickyContainer>
          <div className="App">
            <Sticky>
              {({style}) => <Header style={style}/>}
            </Sticky>
            <div className="page" style={this.pageStyle}>
                <HomePage />
              <OurWork />
              <ContactUs />
            </div>
          <Footer />
        </div>
        </StickyContainer>
      </BreakpointProvider>
    );
  }
}

export default App;

Here is the Header ponent:

import React, { Component } from 'react';
import Logo from './Logo'
import NavBar from './NavBar';
import logo from '../images/transparent.png';

class Header extends Component {
    headerStyle = {
        height: 100,
        margin: 20,
        display: 'flex',
        justifyContent: 'space-between',
        zIndex: 10
    };

    render() {
        return (
            <div className="header" style={this.headerStyle}>
                <Logo logo={logo}/>
                <NavBar />
            </div>
        );
    }

};

export default Header;

• javascript
• css
• reactjs
• react-sticky

• 1 If your aim is to have the header at the same place all the time you should use position: fixed. Sticky can make elements stay in one place until a given scroll position. – Fantastisk Commented Mar 16, 2019 at 15:42
• @Fantastisk yes, that has solved my problem. Thank you so much! – Sadia1990 Commented Mar 16, 2019 at 15:48
• 1 Great! You are wele :) – Fantastisk Commented Mar 16, 2019 at 15:49
• For others who might want to use react-sticky for different purposes, I also found it quite tricky and couldn't make it work. Still, you may want to check this codesandbox: codesandbox.io/s/z715b?file=/src/ponents/content/… check ponents->content->ListToolSelectButton.jsx – Ghadir Commented Nov 7, 2020 at 1:36

1 Answer 1

No external library is required for sticky header, check this resource React Table Sticky Header without external library

Demo

The trick is like

1 . divide the header and data part

2. Use fixed width for both

3. Wrap data container with a div , give that container div a fixed height, allow

   .container { overflox-y : scroll; height: 300px; }