前言

事情是这样子的,本人由于摸鱼过多被临时抽调去支援公司的一个官网开发,其中有个任务是改造侧边栏导航,我心想着很简单嘛,两下搞完继续我的摸鱼大业😁.然后ui就丢给了一个网站让我照着这个做(龟龟现成的都有,这也太好了),网站在这里,让我们来看一下简单的交互.

看了一下大致就是滚动到特定位置后把导航栏固定,hover的时候显示导航列表,这不是小菜一碟.

滚动到特定位置固定导航

主要逻辑就是下面这段,简单来说就是监听滚动条位置,当滚动到特定高度时改变导航按钮的定位方式, css部分是用的@emotion/styled,文档可以看一下这里.

const [fixed, setFixed] = useState(false);
  useEffect(() => {
    const root = document.querySelector('#root');
    if (!root) return;
    const fn = () => {
      if (root.scrollTop > 451) {
        setFixed(true);
      } else {
        setFixed(false);
      }
    };
    root.addEventListener('scroll', fn);
    return () => {
      root.removeEventListener('scroll', fn);
    };
  }, []);

const StyledFixed = styled.div<{ fixed?: boolean }>`
  width: 0;
  position: ${(props) => (props.fixed ? 'fixed' : 'absolute')};
  top: ${(props) => (props.fixed ? '80px' : '531px')};
  left: 80px;
  z-index: 9;
  @media (max-width: 1800px) {
    left: 12px;
  }
`;

效果如下

hover显示导航列表

然后就是鼠标移入的时候显示导航列表了,我心想这还不简单,几行css就搞定了(简单描述下就是把导航列表放在按钮里面,给按钮加上hover效果),但是当我研究了一下腾讯网站的代码,我发现事情好像没那么简单.

导航按钮和列表是平级的,这样的话鼠标移上去列表显示,但列表显示的同时hover效果也没有了,列表就又隐藏了,就会导致闪烁的效果,gif图展示不够明显.

现在问题来了,如果是平级元素,那如何控制hover显示呢,答案就在他们的父元素身上,从下面2张图上可以看出,导航按钮以及他的父元素都加上了hover样式

默认情况下父元素宽度为0,防止误触发列表展示,hover状态下设置width:auto

实现效果

到这里,我已经完全清楚了实现原理,完整的代码在下面

const LeftNav = observer(() => {
  const { selectedKeys, openKeys } = menuStore;
  const [fixed, setFixed] = useState(false);
  useEffect(() => {
    const root = document.querySelector('#root');
    if (!root) return;
    const fn = () => {
      if (root.scrollTop > 451) {
        setFixed(true);
      } else {
        setFixed(false);
      }
    };
    root.addEventListener('scroll', fn);
    return () => {
      root.removeEventListener('scroll', fn);
    };
  }, []);
  const onMenuClick = ({ key }: { key: string }) => {
    menuStore.selectedKeys = [key];
    if (key) {
      const dom = document.querySelector(`#${key}`);
      menuStore.scrollingKey = key;
      dom?.scrollIntoView({
        behavior: 'smooth'
      });
    }
  };

  const onOpenChange = (keys: string[]) => {
    menuStore.openKeys = keys.filter((i) => i !== openKeys[0]);
  };

  return (
    <StyledFixed fixed={fixed}>
      <div className='left-nav-btn'>
        <RightOutlinedIcon />
      </div>
      <div className='left-nav-list'>
        <StyledMenuWrap>
          <Menu selectedKeys={selectedKeys} openKeys={openKeys} mode='inline' items={MENU} onClick={onMenuClick} onOpenChange={onOpenChange} />
        </StyledMenuWrap>
      </div>
    </StyledFixed>
  );
});

const StyledFixed = styled.div<{ fixed?: boolean }>`
  width: 0;
  position: ${(props) => (props.fixed ? 'fixed' : 'absolute')};
  top: ${(props) => (props.fixed ? '80px' : '531px')};
  left: 80px;
  z-index: 9;
  &:hover {
    width: auto;
    .left-nav-btn {
      display: none;
    }
    .left-nav-list {
      transform: none;
      visibility: visible;
    }
  }
  @media (max-width: 1800px) {
    left: 12px;
  }
  .left-nav-btn {
    position: absolute;
    top: 80px;
    width: 40px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 12px;
    border-radius: 100px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 30px 0px rgba(12, 25, 68, 0.05);

    cursor: pointer;

    &::before {
      content: '页面导航';
      background: linear-gradient(139deg, #c468ef 5.3%, #2670ff 90.91%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    &:hover {
      display: none;
      & + .left-nav-list {
        transform: none;
        visibility: visible;
      }
    }
    @media (min-width: 1799px) {
      display: none;
    }
  }
  .left-nav-list {
    position: relative;
    width: 172px;
    z-index: 1;
    transition: all 0.3s ease-in;
    @media (max-width: 1800px) {
      transform: translateX(-200px);
      visibility: hidden;
    }
  }
`;

最终的实现效果如下

至于腾讯网站中的滚动到对应模块高亮菜单的实现可以看看 IntersectionObserver 这个api,好了本次的分享就到此为止了,感谢各位大佬的阅读与点赞😁,你可以说我菜,因为我是真的菜.