[英]Using react-sticky to make a sticky header
I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view.我正在尝试使用 react-sticky 包来制作粘性标题,但我的标题一直滚动到视野之外。 This is the package: https://www.npmjs.com/package/react-sticky I am not sure if I am using the StickyContainer or Sticky compnents correctly.这是包: https ://www.npmjs.com/package/react-sticky 我不确定我是否正确使用了 StickyContainer 或 Sticky 组件。 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:这是 App.js 的代码:
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './components/pages/HomePage';
import OurWork from './components/pages/OurWork';
import ContactUs from './components/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 component:这是 Header 组件:
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;
No external library is required for sticky header, check this resource React Table Sticky Header without external library粘性标题不需要外部库,请查看此资源React Table Sticky Header without external library
Demo演示
The trick is like诀窍就像
1 . 1 . divide the header and data part划分头部和数据部分
Use fixed width for both两者都使用固定宽度
Wrap data container with a div , give that container div a fixed height, allow用 div 包裹数据容器,给该容器 div 一个固定的高度,允许
.container { overflox-y : scroll; .container { overflox-y :滚动; height: 300px;高度:300px; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.