captivationsoftware/react-sticky

Is it possible to stick when the StickyContainer top is something different than 0 ?

acmoune opened this issue · 2 comments

acmoune commented

I have a fixed navbar, with a height of 50px. I would like to stick when the StickyContainer top is 50, instead of 0. Please how can I acheive that ?

acmoune commented

I got it

<StickyContainer>
  <Sticky topOffset={-50}>
    ({style, isSticky}) => (
      <div style={{ ...style, paddingTop: isSticky ? '50px' : '0px' }}>
        ...
      </div>
    )
  </Sticky>
</StickyContainer>
  • 👍6
SeanRoberts commented

I had better luck overriding the top vs. the padding top:
<div style={{ ...style, top: '50px' }}>

(you'll need to play around with that if you need a different top value when it's not sticky)