react-sticky-box: 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…

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

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.

danielberndt on Sep 22, 2018

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!

mdingena on Oct 29, 2018

Excellent, I will report my findings when I implement 0.7.1 (or 0.7.2) later this week.

mdingena on Oct 17, 2018