onPositionChange, onEnter and onLeave fire once on page load, and won't fire again until reload

[theseanco]

I am using Waypoint to track whether a header has left the top of the viewport.

When a page is loaded (using Gatsbyjs's wrapper for react-router's Link component) onPositionChange, onEnter and onLeave are all fired at once (checked by using them to log a string to console), and then are never fired again when the page is scrolled. They are only fired again when I navigate to a different page, and they all fire at once again and the process repeats.

The debug output shows that waypoints of the child div are being tracked, and correctly identify when the div has left the viewport.

Despite this, none of the functions are triggering on scroll - I'm not sure if this is connected to react-router similar to #249

[MatthewHerbst]

@theseanco is this the same as #274 ?

[theseanco]

@MatthewHerbst

Only works when the waypoint is below visible viewport after the first onEnter.

The div waypoints are always within the visible viewport after a page change.

[trotzig]

If you inspect the waypoint div (using developer tools in the browser), is it in the viewport after having fired onLeave?

[theseanco]

If you inspect the waypoint div (using developer tools in the browser), is it in the viewport after having fired onLeave?

Yes, and moving it in and out of the viewport does not fire onPositionChange, onEnter or onLeave, but debugging shows it moving above and inside the viewport

[trotzig]

I wonder if the wrong scrollableAncestor is picked up? Can you check the debug output to make sure that this property is referencing the right element in the DOM?

[theseanco]

I wonder if the wrong scrollableAncestor is picked up? Can you check the debug output to make sure that this property is referencing the right element in the DOM?

the scrollableAncestor here seems to be height and scrolltop

[trotzig]

Alright, I see nothing odd in that debug output. Can you describe your usecase a little more? You are tracking whether a header has left the top of the viewport, but what happens when it does leave?

[theseanco]

When it leaves I intend to use onLeave to add css classes to other elements in the page (to fix the sidebar to the side of the page etc), and onEnter to reverse those changes. I haven't got that far though because I haven't got the function triggers working.

[trotzig]

It looks like the waypoint is wrapping the header. Do you get different results if you avoid the wrapping? e.g.

<div className="header">
  <Waypoint />
  <h1>I'm a header</h1>
</div

instead of

<div className="header">
  <Waypoint>
    <h1>I'm a header</h1>
  </Waypoint>
</div

[theseanco]

Initially the JSX was:

<Waypoint onPositionChange={console.log("changed")} 
onEnter={console.log("enter")} 
onLeave={console.log("leave")} 
debug={true} >
<div className="headerItem">
<Header siteTitle={data.site.siteMetadata.title} />
</div>
</Waypoint>

Changed it to:

<div className="headerItem">
<Header siteTitle={data.site.siteMetadata.title} />
<Waypoint 
onPositionChange={console.log("changed")} 
onEnter={console.log("enter")} 
onLeave={console.log("leave")} debug={true}/>
</div>

The results are the same, with and without scrollableAncestor={window}

[ddennis]

I am having the same problem with gatsby. Did you find a solution?

[theseanco]

I don't think I did!

[ddennis]

Ok. Thanks.

I tried the "VisibilitySensor" lib which seems to work fine, but dont provide direction.

[conspireagency]

@theseanco @ddennis same issue. On enter and on leave fire on page load/component render, but never again. Debug seems to work fine otherwise.

[alfred-pb]

I had a similar issue and the issue was coming from the gatsby-plugin-transition-link The plugin was adding an overflow-x:hidden, adding this to my styles fixed the issue.

.tl-edges {
  overflow-x: initial;
}

[ehubbell]

I'm experiencing the same issue above with Gatsby. If I wrap a block or place the following element in any of my components, every hook fires on initial page load and then nothing. Debug shows all the output as expected.

  <Waypoint 
    scrollableAncestor='window' 
    onPositionChange={console.log("changed")} 
    onEnter={console.log("enter")} 
    onLeave={console.log("leave")}
/>

[gldstrrbt]

Has anyone figured out what the issue is? I created a fresh test page to see whether it was my setup that was screwy or the package, and all signs are pointing to the package being the culprit. Each event triggers on load and I have the waypoint wayyyyy down screen around 10000px down between two LIs and I get absolutely nothing in response... only on load. The way my code is written is no different than how anyone else has theirs written here and the page is barebones, just some LIs with minimal CSS and Waypoint.

[jhclaura]

I found having parent component style be overflow: 'auto' caused this problem

[ignaspangonis]

Same as above. This is what I found:

overflow: auto // doesn't work
overflow-x: auto // doesn't work
overflow: hidden // works
overflow-x: hidden // doesn't work