Trigger effect on one div when another div has 'bottom-in-view' using JS or jquery waypoints

I am using jquery waypoints(though I am happy to use JS).

I am trying to adjust the z-index or hide a div when a different div hits the offset 'bottom-in-view' (comes into view at the bottom of the viewport)

I can't do it on the element itself because it has a fixed position on the bottom already.

I've tried various things like setting the waypoint to trigger when the viewport is 50% down but it doesn't work.

Currently I am attemptinh this with waypoints and want this below, except I want the class 'custom-footer-z-index' to be applied to 'custom-footer' when '.pre-footer' is in view at the bottom not when 'custom-footer' is at the bottom

var $order = $('.custom-footer');

$order.waypoint(function (direction) {
   if (direction == 'down') {
   $order.addClass('custom-footer-z-index');
   } else {
   $order.removeClass('custom-footer-z-index');
   }

}, { offset:'bottom-in-view' });

Alternatively if this is not possible using waypoints, I am already using JQuery.

The reason I am changing the z-index is bring it in front of a header which also has a fixed position, so another option would be to hide the header once the section that proceeds it hits the top of the view port

The CSS

The header

  .effect-casing-yellow {
    background-color: #F7F3B0;
    position: fixed !important;
    top:104px;
}

The first div after each header

.vc_row.yellow.after-header.row-container {
    margin-top: 40vw;
    padding-top: 100px;
}

The rest

.pre-footer-z-index {
    z-index: 5;
}

.custom-footer-z-index {
    z-index: 0;
}

I've never used Waypoints, but how about something like this:

var waypoint = new Waypoint({
  element: document.getElementsByClassName('pre-footer'),
  handler: function(direction) {
    $('.custom-footer').addClass('custom-footer-z-index');
  },
  offset: 'bottom-in-view'
})

When "pre-footer" is at the bottom, it'll add that class to custom-footer