I am trying to fire a waypoint when a section is 30px from the bottom.
I tried duplicating the waypoint below and setting an offset of (calc 100vh-30px) but it did not work.
I see Waypoints has a 'bottom in view' offset but does anybody know how to fire something 30px from the bottom?
The waypoint below does exactly what I want when it is 30px from the top but how would I ALSO have this fire 30px from the bottom?
Essentially I want an item to NOT be visible until it is 30px in from the top or 30px in from the bottom.
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;
}
Haven't used jQuery waypoint yet, but you may give this a try:
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' });