Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Recalculate StickyBox position with custom trigger

See original GitHub issue

Issue Description

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…

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:19 (9 by maintainers)

github_iconTop GitHub Comments

danielberndtcommented, Sep 22, 2018

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

  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.

mdingenacommented, Oct 29, 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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reset ScrollTrigger trigger position? - GSAP - GreenSock
Then I created a custom event called "recalc" to recalculate the position of the ScrollTrigger when launched. In APP2 I modified the animation...
Read more >
javascript - html, css, sticky box, troubles with Chrome - Stack Overflow
I cannot figure out what the problem is. I have fiddle which simulates the problem: The css is: .smallClockPreview { ...
Read more >
react-sticky-box documentation
The sidebar to the left stays in a sticky position. Go ahead and hit the expand button to see how it behaves once...
Read more >
Sticky Tooltip script Unofficial Update - Blogs - Dynamic Drive Forums
Also in sticky mode, if one mouses out of the trigger and back over it, ... 'or right click', 'to sticky box'], //customize...
Read more >
Users Guide - DbVisualizer 11.0
DbVisualizer Pro, license file location . ... Opening the Create Trigger Dialog. ... following row in the DBVIS-HOME/resources/dbvis-custom.prefs:.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found