react 实现爬楼层效果

带脑子的CV工程师

于 2021-11-07 16:50:15 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_36262295/article/details/121193574

本文详细介绍了如何在React应用中实现基于页面滚动的动态顶部栏（appbar）效果。通过监听滚动事件，计算不同区块的位置，动态调整appbar的样式和隐藏状态，同时涉及到元素定位、粘性定位以及页面不同区域的交互处理。内容涵盖了状态管理、性能优化（节流函数）和DOM操作等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 我原有的Home3.0逻辑 爬楼层效果 -->

  const [blockTop, setBlockTop] = useState<{
   
    top: number; bgMode: string }[]>(
    [],
  );

    const getBannerHeight = () => {
   
   
    const banner = document.getElementById('banner');
    const appbar = document.getElementById('appbar');
    if (banner && appbar) {
   
   
      const bannerTop = getElementTop(banner);
      const bannerHeight = banner.clientHeight;
      return bannerTop + bannerHeight - appbar.offsetHeight;
    }
    return 0;
  };

  // 只获取了首页 top和bg
  const getBlockTop = () => {
   
   
    const blockEle = document.getElementById('home_wrap')?.childNodes || [];
    return Array.from(blockEle)?.map(item => {
   
   
      const bgMode =
        window.getComputedStyle(item, null)?.backgroundColor ||
        item.currentStyle.background;
      const top = item.offsetTop;
      return