waypoints element jumpy on iOS & Safari

[kaspar-allenbach]

I have a sticky header which receives a class as soon as the user scrolls past another element.

On safari and iOS it is so jumpy and jittery its unusable. I read that position: sticky and the waypoint's plugin don't go well together, so I separated them that the sticky wrapper doesn't act as a waypoint listener.

html:

<div class="siteNavi"> 
  <div class="triggerWrapper"> 
      <div class="layoutHolder"> 
        <!-- The navigation links  -->
    </div>
  </div>
</div>

<div class="content">
    <!-- All content of the website.
     If I scroll past here, waypoints.js adds a class to the triggerWrapper -->
</div>

My js code:

if ($(".siteNavi").length) {
    var nailElement = 'content';
    var triggerElement = 'triggerWrapper';
    var waypoint = new Waypoint({
        element: document.getElementsByClassName(nailElement),
        handler: function (direction) {
            if (direction === "down") {
                $("." + triggerElement).addClass("triggered");
            }
            if (direction === "up") {
                $("." + triggerElement).removeClass("triggered");
            }
            console.log("Basic waypoint triggered" + "Direction: " + direction);
        },
        offset: 0
    });
}

css

.content {
    position: relative;
}
.siteNavi {
    position: sticky;
    position: -webkit-sticky;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #27292b;
    z-index: 1000;
}

Can I optimize this in any way? The class .triggered is added to .triggerWrapper which has no css directives, so I think position:sticky is out of the equation, no?