I'm trying to make a way point on one element that scrolls left to right, and make that make another div fade away. It seems like the direction listener only applies to up and down?

Here is what I've got:

$('#panel1').waypoint();
$('#scroll_box').bind('waypoint.reached', function(event, direction) {
    $('#scroll_box').fadeOut('slow', 0);

I want it to fade scroll_box once it hits panel1. Am I doing this terribly wrong?

This is a bit baffling, but as of a few minutes ago when I try to bower update my application, I get the following error:

bower ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/imakewebthings/waypoints.git", exit code of #128

Additional error details: fatal: remote error: Repository "imakewebthings/waypoints" is disabled. Please ask the owner to check their account.

Now, it seems to me that this repository is not, in fact, disabled so I'm unsure where this error is coming from. Do you have any idea?

Note: This issue is registered upon request from stackoverflow here

Note: I am not the writer of that stackoverflow question, however I am repeatedly running into this issue, so I am creating this issue to give it visibility and hopefully a quick resolve, thanks.

Running into a problem while trying to implement Waypoints infinite scroll example from http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/.

Here is a JSFiddle to demonstrate my issue: http://jsfiddle.net/jmankin/75g6cap2/5/

HTML

    <div class="infinite-container">
        <div class="infinite-item">Not much content</div>
    </div>

    <a class="infinite-more-link" 
        href="/gh/get/response.html/jermifer/jsfiddle/tree/master/waypoints-infinite/"
    >Loading...</a>

JS

    var waypoint = new Waypoint.Infinite({
         element: $('div.infinite-container')[0]
    });

In instances where the 1st "infinite-more-link" is "above the fold" of the viewport on page load (i.e. the "inifinite-item" content is too short to require scrolling), the script correctly makes an AJAX call to the link href and loads the requested content.

However, it then prematurely--and seemingly incorrectly--proceeds to make the AJAX call to the 2nd "infinite-more-link" even though that is "below the fold" when it loads.

Secondly, from then on, scrolling to the bottom of the page (what would technically now be the 2nd "infinite-item" content element) will cause an AJAX call to the originally requested URL (the one that the client explicitly addressed), which is completely baffling. Under normal circumstances, it does this over and over again. In jsFiddle, it just does it the once, but that still gives you an idea of what I mean.

(Note: I'm not able to know ahead of time the length of the content I'd be loading, which is why I can't guarantee that the user will have to scroll down to see the 1st "infinite-more-link.")

Hi,

I have found an issue with Infinite Scrolling http://imakewebthings.com/jquery-waypoints/infinite-scroll/ Your example works fine. BUT if you refresh the page (e.g. via F5), the waypoint handler gets registered again and again without to be destroyed. I only have one waypoint on my page and register the handler by this way

var $loading = $("<div class='loading'><p>Loading more items...</p></div>");

$('#footer').waypoint('destroy').waypoint(function(event, direction) {
    if (direction == "down") {
        $('#footer').waypoint('remove');
        $('body').append($loading);

        console.log("Load...");

        $('#container').append("... some long content ...");

        $loading.detach();
        $('#footer')waypoint({offset: '100%'});
    }
}, {offset: '100%'});

Scrolling is ok - I see "Load..." only once in the console. But as I said, I see multiply "Load ..." messages after every page refresh. They are getting more and more with each page refresh and the browser ends up with an JS error "too much recursions". I tried to call "destroy" instead of "remove", but the handler is destroyed then. I tried 10+ various things but without success.

Please help! Thanks a lot in advance!

Hi, I'm using the jQuery version (3.0.1) as I need IE8 support, but I'm getting this error.

jQuery version 1.10.2

'left' is null or not an object

The line number that this is referring to (according to the error in IE) is 350, this part...

horizontal: {
        contextOffset: isWindow ? 0 : contextOffset.left,
        contextScroll: isWindow ? 0 : this.oldScroll.x,
        contextDimension: this.innerWidth(),
        oldScroll: this.oldScroll.x,
        forward: 'right',
        backward: 'left',
        offsetProp: 'left'
      },

Any ideas?

run the test results at http://imakewebthings.com/jquery-waypoints/test/#

and see how this test breaks:

http://imakewebthings.com/jquery-waypoints/test/?spec=jQuery%20Waypoints%20%23waypoint(options)%20respects%20the%20bottom-in-view%20function%20alias.

Hi! This functionality is pretty incredible. I'm using the sticky nav functionality and when I refresh from my browser, the sticky unsticks. I've tested in Safari and IE and it's working fine in those browsers, any ideas? Thanks in advance for your help!

I'm using waypoints to hide and show elements at certain scroll points, however when the page loads waypoints fires before #back_to_top is 'bottom-in-view' and adds then removes the classes, which results in the elements flashing on load.

This is my js:

var stickyHeader = new Waypoint({
    element: document.getElementById('sticky_header'),
        handler: function() {
        $('#sticky_header').toggleClass('is_visible');
        $('#back_to_top').toggleClass('is_rotated');
    },
    offset: '-25%'
});
var footerAppear = new Waypoint({
    element: document.getElementById('back_to_top'),
    handler: function() {
        $('#back_to_top').toggleClass('is_fixed');
        $('#layered_logo').toggleClass('is_hidden');
    },
    offset: 'bottom-in-view'
});

Hi there,

I'm trying to use waypoint, it all works perfectly in firefox, chrome, etc!

However I'm having trouble getting it to work properly on IE. I've set up different areas on the pages, they trigger an addclass (with CSS3 animations), obviously that doesnt work on browsers less than IE10, so in that case, I use only jQuery for the fadeIn animation.

A long story short : the waypoint functions all get triggered when visiting the page..

Is there something specific I should do to make it work for IE? Something I should know? I also noticed that rather than id's on spans, id's on DIVS seem to work better..

Many thanks for any pointers!!

It would be great if I could assign different offsets for scrolling up and for scrolling down.

My goal is to show a title for the image that is scrolled in to view.

• when I scroll down offset: '50%' is perfect
• when I scroll up it should trigger on ($.waypoints('viewportHeight')/2) - $(this).outerHeight();

I guess there would be nice uses to that.

(by the way thank you so much for the great plugin and website going with it)

Hi,

Thanks for a great plugin!

I have implemented a sticky header based on the demo that is provided with one change which is causing problems in certain scenarios.

My change is that the header has a large height set in css before the .sticky class is attached.

Once .sticky class is attached a .sticky specific rule changes the height of the header.

This works fine in most scenarios. However, when the height of the page is only just scrollable the page jumps back to full height header element and wont display the minimized .sticky height of the header. The problem is not present when the page has a lot of content.

I have made the ammends to a local version of the sticky demo just to make sure it was not anything in my implementation.

Here is the demo i made to show the problem http://postnatalcounselling.com/original-waypoints-sticky-demo/ .

Any help you can suggest would be great. many thanks Neil

In Infinite.js parseHTML strips out <script> tags by default:

var $data = $($.parseHTML(data))

In my use-case I'd prefer:

var $data = $($.parseHTML(data, undefined, true))

This makes it very handy to include any JS code (analytics, ads, etc) directly in the output. I'm not sure why this is not the default behavior for Infinite JS since the HTML is trusted and it's probably desirable. Maybe you could include an optional flag to allow <script> tags it if there are reasons to exclude it in the first place?

Changing to use typeof arguments[0] === "function instead of $.isFunction(arguments[0]) to support the latest versions of jQuery, since $.isFunction() is deprecated as of jQuery 3.3

https://api.jquery.com/jquery.isfunction/

Hi from Russia! I build my app with webpack to one single app.js file, and get error. In your waypoints library missing semicolon at the end, pleass add it! :)

After retrieving the data from the API response the whole page crashes on the IOS mobile devices. We use your library as a wrapper for the each item in the list in our data-grid. It works good for us everywhere exclude the specific IOS devices. Please look at the conditions and attached files for the getting more details. You can check it yourself on the our web app fintarget.ru.

Conditions:

1. Devices: iPhone 12 mini, iPhone 12 pro max
2. IOS version: 14.7.1
3. Browsers: Safari / Google Chrome

https://user-images.githubusercontent.com/12449613/132637878-c1519ef9-4fbc-4fef-9299-f41e05a150c6.mp4

The code as written now assumes that either

• window.onload is set explicitly, or
• window.onload is undefined

But if someone used jQuery to add a handler i.e. jQuery( function( $ ) { $( window ).load( function () { ... } ); } );

or they used vanilla JS i.e. window.addEventListener( 'load', function () { ... } );

then it's going to overwrite those handlers and they'll never run.

For more info about how to attach event handlers/listeners, see https://stackoverflow.com/a/30915025/8524018