gpt4 book ai didi

javascript - 使用 react-sticky 制作粘性 header

转载 作者:行者123 更新时间:2023-11-28 00:14:26 25 4
gpt4 key购买 nike

我正在尝试使用 react-sticky 包制作一个粘性页眉,但我的页眉一直滚动到 View 之外。这是包裹:https://www.npmjs.com/package/react-sticky我不确定我是否正确使用了 StickyContainer 或 Sticky 组件。我实际上对您应该传递给 Sticky 容器的“样式” Prop 有点困惑。

如果有人能提供帮助,将不胜感激。谢谢!

这是 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;

这是标题组件:

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;

最佳答案

粘性 header 不需要外部库,请查看此资源 React Table Sticky Header without external library

演示

enter image description here

技巧是这样的

1 。划分头部和数据部分

  1. 两者都使用固定宽度

  2. 用 div 包裹数据容器,给容器 div 一个固定的高度,允许

    .容器{ overflox-y:滚动; 高度:300px;

关于javascript - 使用 react-sticky 制作粘性 header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55198506/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com