reactjs read-sticky für fixed/sticky header funktioniert nicht

Question

Ich möchte react-sticky verwenden, um meine Kopf- und Fußzeilenkomponente zu erstellen.

App.js:

class App extends React.Component { 
     render() { 
      return (
       <div> 
        <Header /> 
        <SomeContent /> 
       </div> 
      ); 
     } 
} 

Header.js:

class Header extends React.Component { 
    render() { 
     return(
      <StickyContainer> 
       <Sticky> 
        <header> 
         <h1>Header</h1> 
        </header> 
       </Sticky> 
      </StickyContainer> 
     ); 
    } 
} 

SomeContent.js:

class SomeContent extends React.Component { 
    render() { 
     var style = { 
      width: '100%', 
      height: '1500px', 
      border: '1px solid red' 
     } 
     return(
      <div style={style}> 
       <p>Lorem</p> 
      </div> 
     ); 
    } 
} 

Die Seite App.js einschließlich Kopf- und somecontent anzeigt. Wenn ich jedoch nach unten scrolle, ist der Header in seiner Position nicht fixiert. Es bewegt sich wie jedes normale div. Wo vermisse ich? Bitte hilf mir. Vielen Dank.

Answer 1

Nicht sicher, ob es nicht zu spät ist, aber ich glaube, dass Sie StickyContainer an der falschen Stelle setzen. So für Ihr Beispiel sollte es smth so aussehen:

class App extends React.Component { 
     render() { 
      return (
       <StickyContainer> 
        <Header /> 
        <SomeContent /> 
       </StickyContainer> 
      ); 
     } 
} 

und

class Header extends React.Component { 
    render() { 
     return(
       <Sticky> 
        <header> 
         <h1>Header</h1> 
        </header> 
       </Sticky> 
     ); 
    } 
}