Search code examples
javascriptjqueryjquery-waypoints

Waypoint.js: Add class when N distance to top

I dont know if it is easy or not, but i just cant figure out something with Waypoint.js I need to add a class to #stickytop when user reach, for ex, 100px of scroll Any idea how to do this? offset is not working for me. Thanks in advance

Solution

  • This is not really the use case for jQuery waypoints. It's designed for testing how far specific elements are from the top of the screen, not how far a user has scrolled.

    However you can easily do what you want with jQuery:

    $(document).on('scroll', function () {
    // if the scroll distance is greater than 100px
    if ($(window).scrollTop() > 100) {
      // do something
      $('#stickytop').addClass('myClass');
    }
});

    Or vanilla JavaScript:

    document.addEventListener('scroll', function () { 
  if (window.scrollY > 100) {
    var el = document.getElementById('#stickytop');
    el.className = el.className + " myClass";
  }
})