Waypoint Offset Not Working Correctly

#1

Hi there. I am using waypoint.js to trigger adding classes elements based on when they’re at 80% from the top of the browser.

So far I have the way point working (you can see the console.log to see it in action), but for some reason the 80% is being ignored, as the classes are only added when the elements hit the very top of the browser.

Any ideas as to why this is happening would be GREATLY appreciated.

I have the working example here: https://stable.stable-demos.com/what-we-do/
The element in question is the list on the right that starts with “we think, we research, etc.”

As you scroll down, each list item should change from black to gray. As you scroll up, it should change back to black - but again, all of this should be happening at 80% when the user can see it, vs out of view.

Thank you in advance!!

(Only posted the JS because the working demo has a taller window to test in, but let me know if you need any additional information!).

// What We Do Section
	var continuousElements = document.getElementsByClassName('waypoint')
		for (var i = 0; i < continuousElements.length; i++) {
			new Waypoint({
			element: continuousElements[i],
			handler: function(direction) {

					if (direction === 'down') {

						console.log(this.element.innerHTML + 'down');
						$(this.element).addClass('gray active');
						$(this.element).removeClass('black');

					} else if (direction === 'up') { 

						console.log(this.element.innerHTML + 'up');
						$(this.element).addClass('black');
						$(this.element).removeClass('gray active');

					}
				}
			},
			{ offset: '80%' });

		}
#2

Hi @birdiegolden, I’m not really familiar with Waypoints but shouldn’t the offset be defined in the first argument with the other options?

1 Like
#3

This is an example from their documentation on how they set it:

var waypoint = new Waypoint({
  element: document.getElementById('number-offset'),
  handler: function(direction) {
    notify('25px from top')
  },
  offset: 25
})

http://imakewebthings.com/waypoints/api/offset-option/

#4

JS isn’t my thing I’m guessing that your dynamically added content is either added or removed after a waypoint has been created and affects its positioin.

Your toggle menu for example would probably need to adjust the waypoints each time it is used but that’s just a guess :slight_smile:

#5

Notice a difference with the line that m3g4p0p asked about? i.e. offset is a property of which object? How many arguments does the Waypoint constructor take?

1 Like
#6

You seem to have changed your live example to have that offset of 25 which appears to be working in your example unless as I mentioned above you open any of those accordion menus and then the offset is miles away from where it should be.

The 80% would work if you had it like this:

	// What We Do Section
	var continuousElements = document.getElementsByClassName('waypoint')
		for (var i = 0; i < continuousElements.length; i++) {
			new Waypoint({
			element: continuousElements[i],
			handler: function(direction) {

					if (direction === 'down') {

						console.log(this.element.innerHTML + 'down');
						$(this.element).addClass('gray active');
						$(this.element).removeClass('black');

					} else if (direction === 'up') { 

						console.log(this.element.innerHTML + 'up');
						$(this.element).addClass('black');
						$(this.element).removeClass('gray active');

					}
				}, offset: '80%'
			});

		}

i.e.

	}, offset: '80%'
			});

Note the difference to what you first posted which had a stray bracket before the offset.

However as I said above that will only work with your accordions if you re-initialise the waypoints I believe but I may be wrong as mentioned already :slight_smile:

1 Like