在React项目中添加吸顶效果的代码示例

npx create-react-app react-sticky-header-demo

cd react-sticky-header-demo
npm run start

import React from 'react';
import './StickyHeader.css';
const StickyHeader = () => (
  <header className="sticky-header">
    <h1>Sticky Header</h1>
  </header>
);
export default StickyHeader;

.sticky-header {
  background-color: #f1f1f1;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

import React from 'react';
import './App.css';
import StickyHeader from './StickyHeader';
function App() {
  return (
    <div className="App">
      <StickyHeader />
      {/* 此处可以添加其他组件和内容 */}
    </div>
  );
}
export default App;

.sticky-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

import React, { Component } from 'react';
import './StickyHeader.css';
class StickyHeader extends Component {
  // ...
}
export default StickyHeader;

state = {
  isSticky: false,
};

componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

jsCopy code
componentWillUnmount() {
  window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = () => {
  const scrollHeight = window.pageYOffset;
  const standardHeight = 60;
  if (scrollHeight > standardHeight) {
    this.setState({ isSticky: true });
  } else {
    this.setState({ isSticky: false });
  }
};

render() {
  const { isSticky } = this.state;
  return (
    <header className={`sticky-header${isSticky ? ' sticky' : ''}`}>
      <h1>Sticky Header</h1>
    </header>
  );
}