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

当一个区段距离底部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' });

我尝试复制下面的航路点，并将偏移量设置为（calc 100vh-30px），但没有成功

我看到航路点有一个“视野底部”偏移量，但有人知道如何从底部发射30px的东西吗

下面的航路点正是我想要的，当它是从顶部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

---

尚未使用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' });

---

谢谢-这实际上对底层非常有效（虽然我切换了add和remove类），但是当我直接在我的下面添加代码时，我得到了错误未捕获SyntaxError:Identifier'$customhr'已经声明了是否可以将这两个函数合并为一个函数？实际上我已经解决了我刚刚删除了第二个声明。现在看来很明显。非常感谢。