当另一个 div 使用 JS 或 jquery waypoints 'bottom-in-view' 时触发对一个 div 的影响

Question

我正在使用jquerywaypoints（虽然我很乐意使用JS）。

我正在尝试调整 z-index 或在 不同的 div 达到偏移 'bottom-in-view' 时隐藏 div （在视口底部出现）

我无法在元素本身上执行此操作，因为它已经在底部有一个固定位置。

我尝试了各种方法，例如将航路点设置为在视口缩小 50% 时触发，但它不起作用。

目前我正在尝试使用 waypoints 进行此操作，并希望在下面进行此操作，除了我希望将 class 'custom-footer-z-index' 应用于 'custom-footer' 当 '.pre-footer' 在底部可见时，而不是当 'custom-footer' 在底部时

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' });

或者，如果使用 waypoints 无法做到这一点，我已经在使用 JQuery。

我改变 z-index 的原因是将它放在同样有固定位置的 header 前面，所以另一种选择是隐藏 header 一旦继续它的部分到达视口的顶部

CSS

header

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

每个header之后的第一个div

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

其余

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

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

Answer 1

我从来没有用过Waypoints，但是这样的东西怎么样：

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

当"pre-footer"在底部时，它会将class添加到custom-footer

当另一个 div 使用 JS 或 jquery waypoints 'bottom-in-view' 时触发对一个 div 的影响

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

javascript

jquery-waypoints