Detect current position

[MikeDevice]

Methods onEnter, onLeave and onPositionChange receive an object with data that contains current position. But what do I need to do when I want to get current position? For example, I refresh page and want to know current waypoint position. How about to add onInitialize event handler?

[jamesplease]

Related: https://github.com/brigade/react-waypoint/issues/155#issuecomment-281749975 (and that whole thread).

In that thread, it was decided, at the time, that this lib didn't need such a callback. The more I think about it, though, the more I think it's a good idea. @lencioni / @trotzig , what do you two think?

[lencioni]

@MikeDevice can you help me understand your specific use-case better?

[MikeDevice]

Sure. I have a panel at the top of page but this panel is displayed only after user scroll a page on 300px from the top. For example, now this panel is visible (page is enough scrolled) and user refreshes the page. After refresh, the page is still scrolled and I need to make the panel visible

[rosskevin]

For my use case with material-ui, we would like the header to be rendered flat at zero scroll, but with a box shadow upon scroll. We are currently using this conditional but it seems like a hack that could be brittle depending on the underlying implementation:

  handleWaypointOnPositionChange = ({ previousPosition }) => {
    // initial is undefined, scroll back to 0 is 'above'
    if (!previousPosition || previousPosition === 'above') {
      log.debug('<-----------0 scroll')
    }
  }

[trotzig]

Thanks for sharing the workaround @rosskevin. I agree that it's a little brittle, and it makes me wonder if it would be easier to just attach a separate scroll handler just for this case? I'm assuming the scrolling you're referring to is on the whole page (window)? In such case it could be easier to just attach a scroll listener to the component itself, separate from the waypoint. Or just check the current scroll position on position change.

[rosskevin]

In my case, I'm watching the content of a modal dialog.

[trotzig]

Ah, that makes things a little trickier. If you have ideas for how we could improve waypoint to cover this use-case, let me know. :)

[catamphetamine]

Disregard my previous comment, I found the cause of the issue the project was experiencing: if the page is display: none when it loads and is then set to display: block after a small timeout then react-waypoint for some reason generates the incorrect above position change event. My current workaround is to use visibility: hidden.