codecks-io/react-sticky-box

recalculate offsetTop or offsetBottom

alvteren opened this issue · 2 comments

situplastik commented

I have a problem related to, I suposse that @alvteren have the same or more or less ;)

If you try to change the offsetTop parameter during the execution, the plugin doesn't update the parameters and the element continue with the same offsetTop.

In my case is depending oh the screen-width (responsive-desktop). Responsive website have the menu fixed on top (height=50px) and the sticky element must have 50px of offsetTop because if not the element get sticky behind the menu. In order to solve it, I decide to create two Sticky elements and depending of the screen-width I show one or another.

Component

import React from 'react'
import StickyBox from 'react-sticky-box'
...
export default props => {
  ...
  const stickyTop = window.innerWidth >= 992 ? 0 : 50
  ...
  return (<div>
    ...
    {stickyTop === 0 && <StickyBox offsetTop={stickyTop}>...</Sticky>}
    {stickyTop !== 0 && <StickyBox offsetTop={stickyTop}>....</Sticky>}
    ...
  </div>)
}

Anyway, thanks for the plugin, it works really good!

danielberndt commented

v2.0.0 was just released which causes the sticky box to recalculate its position if offsetTop or offsetBottom are changed

  • 🎉1
  • 🚀1