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

Question

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

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

我看到 Waypoints 有一个“视野底部”偏移，但有人知道如何从底部发射 30 像素的东西吗？

当距离顶部 30 像素时，下面的航路点完全符合我的要求，但我怎么还能让这个火距离底部 30 像素？

基本上我希望一个项目在距离顶部 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 waypoint，你可以试试看：

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