reactjs固定/固定ヘッダーが反応しないために反応します

Question

react-stickyを使用して、ヘッダーとフッターのコンポーネントを作成します。

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> 
     ); 
    } 
} 

ページは、ヘッダーとSomeContentの両方を含むApp.jsが表示されています。しかし、私が下にスクロールすると、ヘッダーはその位置に固定/固定されません。通常のdivと同様に動きます。どこに行方不明ですか？私を助けてください。ありがとうございました。

Answer 1

あまりにも遅くはありませんが、StickyContainerを間違った場所に置いたと思います。だからあなたの例のためには、このようななめらかでなければなりません：

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

と

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