从屏幕底部发射 30px 的航点

Question

我正在尝试在距离底部 30 像素的部分时触发航路点。

我尝试复制下面的航路点并设置偏移量 (calc 100vh-30px) 但它没有用。

我看到 Waypoints 有一个 'bottom in view' 偏移量但是有人知道如何从底部发射 30px 的东西吗？

下面的航路点在距离顶部 30px 时完全符合我的要求，但我怎么也能从底部开火 30px？

本质上，我希望一个项目在距顶部 30 像素或距底部 30 像素之前不可见。

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 的航点

Waypoint to fire 30px from bottom of screen

javascript

jquery-waypoints