javascript - 辅助导航栏不粘

Question

我有一个带有两个导航栏的网页。顶部的那个是固定的，始终存在于应用程序周围，高度为 55 像素。第二种是一种过滤控制导航栏，向下滚动时应该粘在固定的导航栏上。在这两者之间，还有另一个 div 在向下滚动时应该会消失。

我的代码在 Storybook 上看起来像这样。

const containerProps = {
  style: {
    width: '100vw',
    height: '200vh',
    backgroundColor: '#FFF',
    justifyContent: 'center',
  },
}

const mockedContainer = {
  style: {
    width: '100%',
    flexDirection: 'column',
  },
}

const mockedHeader = {
  style: {
    width: '100%',
    height: '55px',
    backgroundColor: 'grey',
    position: 'fixed',
  },
}

const mockedInBetween = {
  position: 'relative',
  top: '55px',
  width: '100%',
  height: '80px',
  backgroundColor: 'darkgrey',
}

const FilterControl = styled(Flex)`
  position: sticky;
  top: 55px;
  width: 100%;
`

storiesOf('Components|Product List/FilterControl', module)
  .addDecorator(centered)
  .add('default', () => (
    <Flex {...containerProps}>
      <Flex {...mockedContainer}>
        <Flex {...mockedHeader} />
        <Flex {...mockedInBetween} />
        <FilterControl />
      </Flex>
    </Flex>
  ))

这段代码有两个问题。据我所知，当到达从顶部定义的偏移量时，相对于固定之间的粘性切换。如果位置在开始时是相对的，则它应该在 mockedInBetween div 的正下方，实际上并非如此，它部分位于它上方并部分占据了它在窗口上的空间。第二，当它从顶部到达 55px 时，应该以 55px 的偏移量粘在标题上。这也不会发生。

标签： javascriptcssreactjsstickystorybook