containers jump for dynamic content

[linuxaman]

First of all thanks alot for the great plugin. I'm trying to implement a UI similar to 9gag, in which the social (fb share, twitter etc.) buttons stick and move along with each of it's corresponding image div. the plugin works awesome for first n number of divs but when i scroll down to load more divs, container starts to jump above image div.

but once i reload the page everything works fine even with scrolling down.

initially on document ready fixedScrollinit(1) is called which works fine. when i scroll down to load more images fixedscrollinit(counter) where counter is the last image div. say fixedscrollinit(10); here i get the problem of jumping divs.

solutions i tried: window.resize(); but didn't work.

thanks in advance.

here's my code.

.post-container is the main div. .data-content is inside the post-container which i want to be fixed.

function fixedScrollInit(counter){ for (i = counter; i <= nelements; i++) { $('.post-container:nth-child('+i+')').attr('id', 'post-container'+i).find('.data-content').attr('id','data-content'+i); } for (i = counter; i <= nelements-1; i++) { if(i==nelements){ limit = 0} else{ limit=$('#post-container'+(i+1)).offset().top-$('#data-content'+i).height()-45; } $('#data-content'+i).scrollToFixed({ marginTop: 60, zIndex: 0, limit: limit }); } }

[bigspotteddog]

Try making the limit a function instead of a static calculation. That usually corrects issues with dynamic layouts.

Best of luck and let me know if that works.

[linuxaman]

Thanks for such a quick reply. I did what you suggest but unfortunately still not working. here's what the limit function looks like: rest of the code is same. it gives the following error

limit: function(){ if(i==nelements){ return 0; } else{ return $('#post-container'+(i+1)).offset().top-$('#data-content'+i).height()-45; } }

[bigspotteddog]

The variable "i" will be different when the limit function is called. That will need to be resolved another way.

[bigspotteddog]

I don't know if this will help you, but have a look at this fiddle: http://jsfiddle.net/ZZYpG/68/.

[linuxaman]

Yes this solves the problem. the above fiddle is using each to loop through every container and checks for if scrrollfixed plugin is associated with it or not. what i was doing wass to associate plugin to only newly created containers.

Editied

sorry it seemed it was working with above code. but it gives the same result, with the initial code that iposted. code only works when i refresh the page. i uploaded the files on webserver here's the link http://loltub.com/ which works fine for document ready call but doesn't work for dynamic call.