CODEWITHSUNDEEP
javascriptjquery-waypoints
Mr Toad
Mr Toad

Reputation: 256

Waypoint to fire 30px from bottom of screen

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

Upvotes: 0

Views: 162

Answers (1)

user11146000
user11146000

Reputation:

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

Upvotes: 1

Related Questions