React-waypoint topOffset示例代码或如何在reactjs中使用

npm install react react-dom react-waypoint

import React from 'react';
import Waypoint from 'react-waypoint';

class ScrollComponent extends React.Component {
  handleEnter() {
    // 当滚动到指定位置时触发的事件
    console.log('进入指定位置');
  }

  handleLeave() {
    // 当离开指定位置时触发的事件
    console.log('离开指定位置');
  }

  render() {
    return (
      <div>
        <h1>Scroll Component</h1>
        <div style={{ height: '1000px' }}>滚动内容</div>
        <Waypoint
          onEnter={this.handleEnter}
          onLeave={this.handleLeave}
          topOffset="20%" // 设置触发位置的偏移量，这里设置为距离页面顶部20%的位置
        />
      </div>
    );
  }
}

export default ScrollComponent;

import React from 'react';
import ScrollComponent from './ScrollComponent';

function App() {
  return (
    <div>
      <h1>React Waypoint Example</h1>
      <ScrollComponent />
    </div>
  );
}

export default App;