javascript - 从屏幕底部 30 像素处发射的路径点

Question

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

我尝试复制下面的路径点并设置偏移量(calc 100vh-30px)，但它不起作用。

我看到 Waypoints 有一个“ View 底部”偏移，但有人知道如何从底部发射 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' });