janicduplessis / collapsible-navbar

125 stars 27 forks source link

Need to recompute _clampedScrollValue when offsetAnim changes #5

Open arv opened 7 years ago

arv commented 7 years ago

Thanks for creating this. Very useful!

Since the clampedScroll depends on both the offsetAnim and the scrollAnim _clampedScrollValue needs to be computed for both.

Here is my code (slightly modified to fit our client)

    // Keep track of animation values because we need them when the scrolling ends.

    const updateClampedScrollValue = diff => {
      this._clampedScrollValue = Math.min(
        Math.max(this._clampedScrollValue + diff, 0),
        TOOLBAR_HEIGHT,
      );
    };

    this._scrollAnim.addListener(({value}) => {
      // clamped animation does not implement addListener but since the animation depends on the
      // this anim we compute the value here.
      const diff = value - this._scrollValue;
      this._scrollValue = value;
      updateClampedScrollValue(diff);

      const {onScrolledToTop} = this.props;
      onScrolledToTop(value === 0);
    });

    this._toolbarOffsetAnim.addListener(({value}) => {
      // clamped animation does not implement addListener but since the animation depends on the
      // this anim we compute the value here.
      const diff = value - this._toolbarOffsetValue;
      this._toolbarOffsetValue = value;
      updateClampedScrollValue(diff);
    });
  }

Without this fix, scrolling a few pixels at a time ends up hiding the toolbar when it should be shown.

I can make this into a PR if you want?

shekharskamble commented 6 years ago

@arv - can you please post the code?

arv commented 6 years ago

@shekharskamble see above