4

我正在使用 jquery waypoints（虽然我很高兴使用 JS）。

我正在尝试调整 z-index 或隐藏 div 当不同的div 击中偏移量'bottom-in-view'（在视口底部进入视图）

我不能在元素本身上这样做，因为它已经在底部有一个固定的位置。

我尝试了各种方法，例如设置航点以在视口下降 50% 时触发，但它不起作用。

目前我正在尝试使用航路点并希望在下面这样做，除非我希望在底部看到“.pre-footer”时将“custom-footer-z-index”类应用于“custom-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' });

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

我更改 z-index 的原因是将它放在也具有固定位置的标题前面，因此另一种选择是在前进的部分到达视口顶部时隐藏标题

CSS

标题

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

每个标题后的第一个 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;
}
4

1 回答 1

0

我从来没有使用过 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”位于底部时，它将将该类添加到custom-footer

于 2019-08-24T01:14:40.937 回答