[Sticky] Bug does not play nicely with ajax content

[phifa]

I think I tried almost all foundation plugins and got them all working with ajax content, except for sticky. You can see it on this page:
http://p352632.mittwaldserver.info/

You can see sticky is working. But when you first visit this site and go via the menu to the sticky plugin, the plugin does not get initialized.
http://p352632.mittwaldserver.info/page2.html

This is how I initialze the plugins:

// Init on document ready
$(document).ready(function(){
    pageInit(document);
});

// Init with Ajax
$(function(){
    'use strict';
    var $page = $('#page'),
        options = {
            debug: false,
            prefetch: true,
            blacklist: '.no-smoothState',
            cacheLength: 7,
            onStart: {
                duration: 200, // Duration of our animation
                render: function ($container) {
                    // Add your CSS animation reversing class
                    $container.addClass('is-exiting is-inprogress');
                    // Restart your animation
                    smoothState.restartCSSAnimations();
                }
            },
            onProgress: {
                duration: 0,
                render: function ($container) {
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {
                    // Remove your CSS animation reversing class
                    $container.removeClass('is-exiting');
                    // Inject the new content
                    $container.html($newContent);
                }
            },
            onAfter: function($container, $newContent) {
                pageInit($newContent);
            }
        },
        smoothState = $page.smoothState(options).data('smoothState');
});


function pageInit(scope) {
    // Init Foundation Plugins
    $(scope).foundation();
}

[alanontheweb]

I second that. Same exact issue here.

[phifa]

anybody from the ZURB / Sticky team can reproduce this issue?

[phifa]

@rafibomb or anybody else? Nothing?

[kball]

Hi @phifa - thank you for the example, I see the bug happening - I'd like to dig in and solve it. Is this example in a repo I can pull down and do some debugging on with a local copy of Foundation?

[phifa]

smoothfoundation.zip
@kball No repo thus far. I attached the files as a zip for you. Thanks for checking in!

[kball]

This is due to the same thing as #8394

What's going on is a set of sticky intialization code is wrapped in an event handler on the window load. I'm not entirely sure why sticky is trying to have some things happen on load... probably because the page may not be done laying out, but the current approach assumes that a sticky is always instantiated before pageload.

I think the fix is probably to do the full instantiation immediately, but add a load handler that will recompute things as necessary.

Given how much sticky depends on the dimensions of its anchor, it seems like another good candidate for #9126 , however it also depends on the position of the anchor in the page, which I don't think data-mutate would catch... any thoughts on how to watch for that @coreysyms?

[coreysyms]

So a couple things.

1. This and any ajax loaded content being added to sticky or it's parent container or anchor container would be a great candidate for data-mutate. The mutate trigger would most likely need to call setSizes() in sticky.js as it sits now.

2)For this particular case, the mutate listening elements are removed from the DOM and replaced, (even though it looks the same on the page it's different and new) and everything about sticky in this case is removed and replaced. So technically speaking, this is a mutate event, but sticky can't / won't react to it because it is removed. The only thing that would react to mutate is off-canvas, since all the new DOM elements are loaded into it's container. @phifa is correct in trying to (re)initalize any plugin, however... (see issue 3)

3. The real issue is $(window).one() in my opinion, since window.load is never fired again. Sticky only initializes once. This should be re-written.

[kball]

Ok, sounds good. We're thinking a lot of sticky fixes will happen in 6.2.5, so going to put this in that milestone and handle the .one issue for it.

[kball]

Lets see if we can get this in for 6.3, now that we moved that in instead of having a 6.2.5.

[coreysyms]

Marking this issue for the purposes of adding in a mutation event to Sticky, it won't fix all the issues, but it will give the plugin something to trigger off of. Tag #9320

[colin-marshall]

@phifa have you tried this with v6.2.4? I noticed your example uses v6.2.1 and when I tried to reproduce with v6.2.4 it actually worked. If you wouldn't mind, could test with the latest version and confirm it works for you? Thanks!

[colin-marshall]

@phifa I'm actually going to close this for now because as far as I can tell it was resolved. Feel free to reopen if you can reproduce in 6.2.4. Thanks!

[justtobeok]

Hey,
I hate to say it, but the problem seems to persist in 6.2.4.
I have setup an example here:
http://proflax-development.de/sticky-bug/

On first load it's all good, but after following the link at the top (revisiting the page and injecting the content in the main section) sticky is broken.
For test purposes, I have thrown in equalizer to verify the foundation call on the injected content is working.

I also added a button to call '_calc' on sticky manually to show whats happening. On first load the calculation is fine, after injection the calculation is messed up (seems to not find the anchor).
Hope this helps and I hope you'll find a fix, since I need it soon ;)

Sorry I don't know how to set up a pen for this example, but I'll leave the example online for a while.
Thanks!

Edit:
referring to #8394 calling $(window).trigger('load.zf.sticky'); and then $('.sticky').foundation('_calc', true); after foundation has been initialized on the added content seems to be a workaround - at least it is in my case.

[kball]

@colin-marshall based on the above I still believe relying on a one-off event handler to do some of the initialization is a mistake... I can see why it wants to run it again after full load, but maybe we can wrap that initialization in a function and call it both on init and then again in the handler?

[colin-marshall]

@kball I definitely agree and planned on changing that regardless. I just thought that this specific issue was resolved since I couldn't reproduce with 6.2.4 but obviously that isn't the case. I will make a visual test with @justtobeok's example and experiment later today.

@justtobeok thanks for testing and for the example! Very helpful.

[kball]

Pushing this out to 6.3.1 unless we can confirm that it is fixed

[hamb0n3]

Has this been fixed yet? I am working on a blog that is using ajax to load the next post once the user has reached the bottom of each post, and within each post there are two sticky sidebars. On the first post (the one the page loads onto), sticky works great; but once the next post is loaded, sticky doesn't work for the ajax'd content. If I scroll back up to the first post, sticky is still working fine for that one, but not for any of the others.

All of that to ask: has anyone found a fix for this?

EDIT: I am also using an event listener for when the next post is loaded, and I have tried every possible solution I have seen mentioned to no avail. Thanks!

[phifa]

@chrishammered no fix so far. i recommend using another library, http://stickyjs.com/ for example. Your site sounds interesting, would be cool to see the page once its launched.

[hamb0n3]

@phifa thanks for the suggestion. I decided to just roll my own sticky, since none of the plugins I looked at were able to meet my needs. So far it's coming along nicely and it should be live in the next week or so.

[mejibyte]

Can we close this issue as a duplicate of #8394?

[DanielRuf]

Can we close this issue as a duplicate of #8394?

As requested.