CODEWITHSUNDEEP
javascriptjqueryjquery-waypoints
h bob
h bob

Reputation: 3780

Scroll percentage with Waypoints library

I'm trying to use the Waypoints library.

My use case is that I need to detect when a user reads to 20%, 40%, etc., of a page.

However the library seems to work differently in that it detects when a certain DOM element comes into view, regardless of its scroll depth.

How do I make it do what I need?

Upvotes: 0

Views: 607

Answers (1)

Lajon
Lajon

Reputation: 321

Check the documentation http://imakewebthings.com/waypoints/api/offset-option/

To detect the page position you could attach a Waypoint to the wrapper of the page. I mean to the parent element of your page which would hold the page content (it would be 100% height of your page):

<body>
    <div id="wrapper">
          page content...
    </div>
</body>

Then according to the documentation you could use the "offset" to achieve what you need. You can attach a Waypoint to the "wrapper" and use the offset to get the percentage to detect how far the user scrolls.

var waypoint = new Waypoint({
    element: document.getElementById('wrapper'),
    handler: function(direction) {
         alert('50% past the top')
    },
    offset: '-50%'
})

Upvotes: 1

Related Questions