语义ui粘性辅助菜单到固定顶部菜单

Question

我有这样的布局codepen

我可以在页面顶部固定的黑色菜单下方获得绿色的辅助菜单棒吗？我得到绿色菜单，该菜单停留在页面顶部，但不停留在黑色菜单的下面。如果我用黑色菜单的高度在Sticky-tag上设置偏移值，则会出现一些奇怪的现象。

<Sticky context={this.contextRef} offset={61}>

黑色顶部固定菜单

const FixedNav = ({ children }) => (
  <Menu fixed='top' color='blue' inverted >
    <div ref={this.contextRef} />
    <Container>
      <Menu.Item>
        <Image size='mini' src='https://semantic-ui.com/images/logo.png' style={{ marginRight: '1.5em' }} />
        My Vineyards
      </Menu.Item>
      <Menu.Item position='right'>
        <Button as='a' inverted>
          Log-in
        </Button>
        <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
          Sign-up
        </Button>
      </Menu.Item>
    </Container>
  </Menu>
)

绿色粘滞菜单

const StickyNav = ({ children }) => (
  <Sticky context={this.contextRef}  >
    <Menu color={'green'} inverted >
      <Container style={{'align-items': 'center', 'justify-content': 'center'}}>
        <Menu.Item as='a'>Introduction</Menu.Item>
        <Menu.Item as='a'>Vineyards</Menu.Item>
        <Menu.Item as='a'>Marketplace</Menu.Item>
        <Menu.Item as='a'>Tripadvisor</Menu.Item>
      </Container>
    </Menu>
  </Sticky>
)

我的裁判是错误的还是我误解了粘性标签？

我想要这个：

不是这样的：