search

captivationsoftware / react-sticky

<Sticky /> component for awesome React apps
MIT License
2.64k stars 385 forks source link

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

Closed acmoune closed 6 years ago

acmoune commented 6 years ago

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 6 years ago

I got it

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

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)