JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.js"></script>
    <p>First, scroll to bottom of the element to trigger the initial waypoint.</p>
    <p>Then scroll to the midpoint of the element, somewhere where the bottom of the element is nowhere near the viewport</p>
    <p>Click the button.</p>
   <p>Result: The buggy behavior that should occur is that the newly added waypoint is immediately triggered with a direction of "up" at the end of the global waypoint refresh.</p>
<div id="contact" style="background-color:red;height:1000px;position:relative;">
    <button style="position:absolute;top:35%;left:40%;width:20%;height:50px">Add waypoint</button>
</div>

JavaScript

function waypointHit(evt,direction) {
    alert("Waypoint hit going " + direction);
}

$('#contact').waypoint(waypointHit,{offset:'bottom-in-view',triggerOnce:true});


$('button').click(function() {
    $('#contact').waypoint(waypointHit,{offset:'bottom-in-view'});
});