search

leafo / sticky-kit

A jQuery plugin for creating smart sticky elements
http://leafo.net/sticky-kit
2.91k stars 520 forks source link

Multiple sticky element in one column #71

Open jarred-cz opened 10 years ago

jarred-cz commented 10 years ago

Hello,

I spent several hours trying to figure it out, but I must give up. This great plugin works like a charm, but unfortunatelly not in my scenario. So I would like to asked you for help.

Situation: I have two columns - the left one is very tall and the right contains next two columns + box which is under those columns. Example: http://jsfiddle.net/jdz89bn1/1/ Live "demo": http://preview.skymedia.cz/skutrportal/sticky.html (sticky) / http://preview.skymedia.cz/skutrportal/nosticky.html (without sticky)

What I am trying to do: The yellow and orange columns should scroll down (each column has different height) and if they reach the pink box, all those elements should scroll down until they reach the bottom of the very tall left column (lightblue).

It is even possible with this plugin?

The closest catch was that all columns scroll quite good, but their positions jumps randomly up and down during scrolling (IMHO because of nested fixed/absolute positioning).

image

image

Thank you very much for any kind of help.

courdek commented 10 years ago

If anything in your sidebar is loaded asynchronously you should trigger the recalc event upon completion. I experienced issues with this with tabbed content in the sidebar. Because the content within tabs was of variable height, the initial calculated height was no longer accurate. I fixed it by adding a callback.

I can confirm that triggering recalc on your site fixes the issue after load. Looks to me like it's something to related to the images loading in late. I didn't have time to investigate further but hope this helps!

jarred-cz commented 10 years ago

Thank you very much for tip, but unfortunately it doesn't work. I add "$(document.body).trigger('sticky kit:recalc');" 5 sec after page is loaded (when everything is loaded, I am sure), but no change...