javascriptcssjquery-waypoints

How to disable Waypoints when horizontal scrolling?

I'm using waypoints.js with the Sticky shortcut: http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

It's working great when I scroll vertically, but if I also scroll horizontally, then my elements stay stuck in their fixed position instead of scrolling horizontally.

Here's what I have:

.board-header.stuck {
   position: fixed;
   z-index: 100;
   top: 32px;
}


var sticky = new Waypoint.Sticky({
   element: $('.board-header'),
   offset: 32
});

Before Horiz. scroll

enter image description here

After Horiz. scroll

enter image description here

How can I disable Waypoints when horizontal scrolling, or use fixed positioning for vertical scroll & relative when horizontal scroll?

Solution

  • Please try, you problem is the CSS with the, position. Absolute is no good, the way CSS infinite scroll animations work. That JUMP only happens because CSS animations always reset to their starting position, so no repeat

    Try this, real simple and easy fix,

    <div class="TheID">Change obviously</div>

.TheID {
   position: sticky;
   top: 32px;
   z-index: 100;
}

    It takes out the absolute and hopefully works for you.