topOffset not working

I’m trying to trigger onEnter at a certain distance from the top but they trigger on the “edge” each and every time.

I’ve tried topOffset=“15%” topOffset={50} etc.

The waypoint containing div has position: relative and that div’s container has this.

position: absolute;
perspective: 300px;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto

I have a page that is divided in “slides” and the next slide is already slightly visible by making each slide have a height of 98vh. Unfortunately, this triggers the waypoint for the next slide automatically, which is what I’m trying to avoid by using topOffset.

Here’s some of the debug output with a topOffset of 15%.

["waypoint top", 0]
["waypoint bottom", 328.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "inside"]
["previousPosition", "inside"]
["waypoint top", 328.453125]
["waypoint bottom", 1234.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1234.453125]
["waypoint bottom", 1764.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1764.453125]
["waypoint bottom", 2449.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]

and without a topOffset

["waypoint top", 0]
["waypoint bottom", 328.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "inside"]
["previousPosition", "inside"]
["waypoint top", 328.453125]
["waypoint bottom", 1234.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1234.453125]
["waypoint bottom", 1764.453125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 1764.453125]
["waypoint bottom", 2287.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]
["waypoint top", 2287.03125]
["waypoint bottom", 2529.03125]
["scrollableAncestor height", 242]
["scrollableAncestor scrollTop", 0]
["currentPosition", "below"]
["previousPosition", undefined]

[ChrisCinelli]

Nevermind. I did not understand what topOffset is. The name is a little confusing. What I wanted to do is doable with a negative bottomOffset.

It looks like I am not the only one that got it wrong though. It would not be a bad idea to update the example on http://brigade.github.io/react-waypoint/ to show what is what.

[ChrisCinelli]

It is clear to me now. The offset are relative to the scrolling container and a positive offset means toward the center of the container. But it was obviously not what I was intuitively expecting.