Question

我有一个带有两个导航栏的网页。顶部的那个是固定的，总是出现在应用程序的周围，高度为 55px。第二个是一种过滤控件导航栏，向下滚动时应该粘在固定的导航栏上。在两者之间，还有另一个 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 的偏移量粘在标题上。这也不会发生。

辅助导航栏不会粘住

0 个答案: