Recalc after added HTML by ajax, doesn't recalc

[R4YM3]

Hi there,

I've got the following situation where stickykit won't recalc. Am i doing something wrong or is this a bug?

// set stickykit
self.$element.stick_in_parent( { 'offset_top' : 70 } #);

// get html data by ajax
var $ajaxCommentsData = ajax.ajaxGet( $url, 'html' );

$ajaxCommentsData.success( function ( data ) {
    var $data = $(data);

    // place new html in (left column, which makes parent height larger)
    $leftColumn.append( $data );

    // recalc sticky caus of the new added html by ajax (right column is sticky)
    $(document.body).trigger("sticky_kit:recalc");
});

This doesn't work either

self.$element.stick_in_parent( { 'offset_top' : 70 }); //works
self.$element.parent().css( 'height', '5000px' ); //works
$(document.body).trigger("sticky_kit:recalc"); //doens't recalc

For what is worth, :detach does work

Thanks in advance

[leafo]

area there images or any other items that load async in the dynamically appended content that cause it to change shape again?

[R4YM3]

Hi Leafo,

The problem seems to be that on instantation of the sticky-kit, the element's height is as high as its parent height. Only after the Ajax request finishes, the height is changed.

Looking into the code, if I remove the following lines my problem is solved:

      if (height === parent_height) {
        return;
      }

It seems like the sticky initiation is called off when the height is equal. Which normally makes sense, however with Ajax it would not.

The solution might be to add an option on initiation (like: 'force' : true), to override this?

[neb1neuron]

+1 to R4YM3 comment. When using with ajax calls and dynamic content it should be an option to make container stick in the parent even if the parent height is not big enough

[R4YM3]

PR: #160

[neb1neuron]

@leafo can you please include this in the the latest version of sticky-kit.js? I saw that you changed the licence type for the library and wanted to see if it's ok to make this change in the library in my code if this fix will not be included soon in the latest version. This is a very important fix for async data loading in the parent component changing it's height. Thank you!

[krispind]

+1 to R4YM3 comment. I have the opposite problem where on page load the sidebar is longer than the main column, so it doesn't stick (working properly). After an AJAX form submit the column shrinks and then I'd like it to stick. I tried using recalc in the AJAX callback, but it doesn't work. Removing the lines @R4YM3 suggests makes the recalc work, but breaks the initial check on page load - meaning the sidebar always sticks even when it's the longer column.

It seems recalc is not updating the heights and really recalculating. I also tried re-instantiating the stick_in_parent function completely in the AJAX callback, but that didn't work either.

[xmon]

I have similar problem like @krispind.

At first I'm "Not sure if your sidebar or your main content is taller".

If at first main content is taller, the content sticky is OK. And if dynamically load content on sidebar, and sidebar become taller than content, the sidebar is not stiky, KO.

I launch recalc after load content on sidebar, but it doesn't work. I try to detach and after sticky_in_parent again, but it doesn't work.

Any idea to solve this situation?

thanks a lot

[CiprianD]

Any progress/news on this? Thank you

[ghost]

The same problem. Tried a lot of options but nothing works :(

[ghost]

Finally, I've found a workaround: I'm applying sticky kit after each ajax call and calling recalc but only if main part height is more than sidebar height. Not the best solution, but works for me.

[Optarion]

Can you tell me more about your workaround @plakhin ? Because I tried to apply it and it does not work.

Here is what I got:

//Sticky initialisation
$(this).stick_in_parent({
  sticky_class: 'fixed',
  offset_top: 80,
  recalc_every: 1
});

//After my ajax is complete and the new html is added to the DOM I stick again

$(this).stick_in_parent({
  sticky_class: 'fixed',
  offset_top: 80,
  recalc_every: 1
});

But then, the new stick does not apply because data("sticky_kit") is set on the element. So the function doesn't run again because of the if (elm.data("sticky_kit")) {return;} (l.40)...

I tried to detach then stick again but nothing is being triggered.

Any answer will help. Hope you got some!

[ghost]

Detach isn't working, yes.

if ($(".content").height() > $(".sidebar").height()) {
    $(".sidebar").stick_in_parent();
}

What I actually do - is checking if content div height is greater then sidebar height and only then applying sticky kit. Because if sticky kit is applied when main div height is less - it will not work and detach or recalc will not help. But if content div height is greater - then you can apply sticky kit each time after adding elements to any of these divs even without detach and it will recalc height right.

P.S. Sorry for my poor English.

[gianito]

Any progress on this ? Could you add this fix this in the the latest version of sticky-kit.js ? Thanks

[sheetal-mandyal]

Did anyone found a solution for this issue?

[regenrek]

Hi,

I struggled also with sticky-kit and ajax requests. I replaced sticky kit with stickyfill and it works.