Javascript 使用react sticky制作粘性标题

我试图使用react sticky软件包制作一个粘性标题，但是我的标题一直滚动到看不见的地方。这是包裹： 我不确定是否正确使用了粘性容器或粘性组件。实际上，我对你应该传递给粘性容器的“风格”道具有点困惑

如果有人能帮忙，我们将不胜感激。谢谢

下面是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}来自'React'；
导入“/App.css”；
从“./components/Header”导入标题；
从“./components/Footer”导入页脚；
从“./组件/页面/主页”导入主页；
从“/components/pages/OurWork”导入我们的作品；
从“/components/pages/ContactUs”导入ContactUs；
从“react socks”导入{BreakpointProvider}；
从“react Sticky”导入{StickyContainer，Sticky}；
从“react socks”导入{setDefaultBreakpoints}；
setDefaultBreakpoints([
{small:0}，
{中等：700}
]);
类应用程序扩展组件{
页面样式={
显示：“flex”，
flexDirection:“列”
}
render（）{
返回(
{（{style}）=>}
);
}
}
导出默认应用程序；

以下是标题组件：

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;

import React，{Component}来自'React'；
从“./Logo”导入徽标
从“/NavBar”导入导航栏；
从“../images/transparent.png”导入徽标；
类头扩展组件{
头型={
身高：100，
差额：20，
显示：“flex”，
justifyContent:'之间的空间'，
zIndex:10
};
render（）{
返回(
);
}
};
导出默认标题；

粘性标题不需要外部库，请检查此资源

演示

诀窍就像

一,。将标题和数据部分分开

两者都使用固定宽度

用div包装数据容器，给容器div一个固定的高度， 容许

.集装箱{ overflox-y：滚动； 高度：300px； }

---

如果您的目标是使标题始终位于同一位置，则应使用“位置：固定”。Sticky可以使元素保持在一个位置，直到给定的滚动位置。@Fantastisk是的，这解决了我的问题。非常感谢你！伟大的不客气：）对于其他可能出于不同目的使用react Stick的人，我也发现它非常棘手，无法使其工作。不过，您可能需要检查此代码沙盒：检查组件->内容->ListToolSelectButton.jsx