Html 粘性位置在React应用程序中不工作？_Html_Css_Reactjs_Jsx

Html 粘性位置在React应用程序中不工作？

html css reactjs

Html 粘性位置在React应用程序中不工作？,html,css,reactjs,jsx,Html,Css,Reactjs,Jsx,有些新的反应，但已经学会了基础-挂钩等我正在尝试创建一个简单的博客应用程序，它使用一个粘性标题——假设它是一个简单的“position:sticky”CSS样式。但是，我已经尝试过了，但是元素不粘。在网上搜索之后，我遇到了关于“溢出”的常见问题。检查了整个项目，整个项目中没有“溢出”属性。还有其他想法吗？代码如下 Header.js const Header = () => ( <div className='header'> <Nav>

有些新的反应，但已经学会了基础-挂钩等

我正在尝试创建一个简单的博客应用程序，它使用一个粘性标题——假设它是一个简单的“position:sticky”CSS样式。但是，我已经尝试过了，但是元素不粘。在网上搜索之后，我遇到了关于“溢出”的常见问题。检查了整个项目，整个项目中没有“溢出”属性。还有其他想法吗？代码如下

Header.js

const Header = () => (
<div className='header'>
    <Nav>
        <div className='logo'>
            <NavLink exact to='/'>
                <h1>Logo</h1>
            </NavLink>
        </div>
        <div className="forinput">
            <InputWithLabel
                id="search"
                isFocused
                className='input'
            />
        </div>
        <NavMenu>
            <NavLink className='button' exact to='/' activeStyle>
                Home
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Designers
            </NavLink>
            <NavLink className='button' exact to='/detail' activeStyle>
                Items
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Saveds
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Profile
            </NavLink>
        </NavMenu>
    </Nav>
    <hr/>
</div> );

layout.js

const Layout = (props) => (
    <body>    
        <div>
            <Header />
            {props.children}
        </div>
    </body>
);

const布局=（道具）=>(
{props.children}
);

App.js

const App = () => (
  <Router>
    <Layout className='App'>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/p/:id' component={Detail} />
      </Switch>
    </Layout>
  </Router>
);

const-App=（）=>(
);

我太蠢了。。。事实证明，由于“页面”或正文不够长，它自然不会滚动。调整了页面的高度后，粘性导航可以根据需要工作

const App = () => (
  <Router>
    <Layout className='App'>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/p/:id' component={Detail} />
      </Switch>
    </Layout>
  </Router>
);