Question

当某个部分距离底部30像素时，我试图触发一个航路点。

我尝试复制以下航路点并将偏移设置为（calc 100vh-30px），但是它不起作用。

我看到Waypoint的偏移量为“底部”，但是有人知道如何从底部发射30px吗？

下面的航路点恰好符合我的要求，当它距顶部30像素时，我又如何将火焰距底部30像素？

从本质上讲，我希望项目在顶部距顶部30px或底部距30px之前不可见。

var $customhr = $('.custom-hr');

$customhr.waypoint(function (direction) {
    if (direction == 'down') {
    $customhr.addClass('js-custom-hr-vanish');
    } else {
    $customhr.removeClass('js-custom-hr-vanish');
    }   

}, { offset:'30px' });

CSS

.custom-hr {
    opacity: 1;
}

.js-custom-hr-vanish {
    opacity: 0;
}

Answer 1

还没有使用jQuery航路点，但是您可以尝试一下：

let vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
vh -= 30;

const $customhr = $('.custom-hr');

$customhr.waypoint(function (direction) {
    if (direction == 'down') {
    $customhr.addClass('js-custom-hr-vanish');
    } else {
    $customhr.removeClass('js-custom-hr-vanish');
    }   

}, { offset: vh + 'px' });

航点从屏幕底部触发30px

1 个答案: