Combining Waypoints and Horizontal Scroll

Question

I have been successful in getting Waypoints (http://imakewebthings.com/jquery-waypoints/) and a horizontal scroll (http://www.htmldrive.net/items/show/966/jQuery-Horizontal-automatic-Scrollbars-with-mouse) working on separate pages, but cannot combine them. I think it has something to do with the waypoints option parameters.

The waypoints function is:

$(function () {
            $('#waypoint').waypoint(function () {
                alert('You have scrolled to an entry.');
            }, {
                offset: '100px'
            });
        });

Its added to the page with:

<div id="horiz_container_outer">
<div id="horiz_container_inner">
    <div id="horiz_container">
        <div class="horiz_box1">Stuff</div>
        <div class="horiz_box2">Stuff</div>
        <div class="horiz_box1">Stuff2</div>
        <div class="horiz_box2">Stuff2</div>
        <div class="horiz_box1">Stuff3</div>
        <div class="horiz_box2">Stuff3</div>
        <div id="waypoint">Waypoint</div>
    </div>
</div>

I put together a quick JS fiddle, but the horizontal slider was not working in that example for some reason. IF it helps: http://jsfiddle.net/bretwhiteley/w2p84Lmp/

Answer 1

In addition to the horizontal option, you need to set the context option since the scrollable element you're using isn't the window. From the docs:

The context defines which scrollable element the waypoint belongs to and acts within. The default, window, means the waypoint offset is calculated with relation to the whole viewport. You can set this to another element to use the waypoints within that element. It accepts a selector string, raw HTML element, or jQuery object.

Update: The 3.0 release brings is a new doc page for the context option and changes the rules slightly about what is allowed depending on which build you're using.