Recalculate StickyBox position with custom trigger

Can I force StickyBox to recalculate its top position?

I’m displaying an expandable list in a sidebar. When the list expands, the StickyBox sticks nicely when necessary. However, when I click the button at the bottom of the list to collapse it back into showing the top 10 items only, the StickyBox disappears off-screen. This is because the content is now much less high, and its top position is still offset from its longer previous height.

I’d like to be able to trigger a recalculation of the top position after collapsing my list. Is there a way to do that? I’ve thought about faking a browser window resize event, but that seems very dirty…

[danielberndt]

Yes, that seems like a valid point. There’s no official api to do this yet, but something like this should work:

class MyComp extends Component {

  handleRef = n => this.stickyBoxInstance = n

  recalculatePosition = () => {
    this.stickyBoxInstance.latestScrollY = -1
    this.stickyBoxInstance.handleScroll()
  }

  render() {
    return <StickyBox ref={this.handleRef}>{content}</StickyBox>
  }

}

recalculatePosition simulates a scroll event. Setting latestScrollY to -1 implies that the handleScroll event will behave as if you scrolled down.

[mdingena]

I’ve upgraded to 0.7.5, taken out all the hacks from before, and it seems to work out of the box now. Great, thanks!