sticky-kit
sticky-kit copied to clipboard
leafo
Let sticky element work inside overflow: scroll containers
Hello, Sticky-Kit relies on the body scroll values to work, but since my web app uses divs as main containers, the body never scroll.
Here's an oversimplified version of what I mean: http://jsbin.com/yitoheno/4
Is there a workaround for this? Maybe the plugin already accounts for this and I'm missing something?
Thanks!
If you take a look at the Sticky-kit website, you will see that your statement isnt true, since the examples are working on scrolling divs. In this example you linked, it isnt working because you linked to the wrong file. At least, thats the error message being displayed by firebug. Check that and update this issue.
i have updated that example, but neither i has capable to stick on scrolling div (overflow:scroll), there is another way to do this?
regards
Sorry for the delay. I have updated that example too, and I can't get it to work anyway:
http://jsbin.com/yitoheno/8
Having the same issue here & wondered if there was advice on a solution.
@frenetic if i understand it correctly, the examples on the website are in frames as opposed to divs.
also following to see if anyone has come up with a solution for this.
+1, I'm having the same issue. Website examples look perfect, but they use iframes rather than divs. It would be awesome if this worked on divs with overflow:auto, but I haven't been able to make this work without relying on the body scroll
I'm glad this has been acknowledged and set as an enhancement. Any estimate?
hi, can you provide as a demo page, that is easier to understand instead? just a simple website page that use this plugin, a simple code that non pro can understand and just copy the code and just change the content.
Hi, i've tried this trick with foundation 5 framework sidebar and custom offcanvas with wrapper for whole document with pseudo-scroll (overflow: auto). Change in your source code of sticky kit lib this lines. Change 'win' variable link from window object to your element with scroll. Then edit line 85-90 - code of spacer-wrapper so that its height would be equal the height of your main container (only if you have some bugs with the spacer element and it parent(spacer) gets wrong height). In this case also delete float attribute.
- win = $('YOUR_ELEMENT_WITH_SCROLL'); ....
if (spacer) { spacer.css({ width: elm.outerWidth(true), height: $('YOUR_MAIN_CONTAINER"]').height(), display: elm.css("display"), "vertical-align": elm.css("vertical-align") // DELETE FLOAT ATTR });
Optionally, I added location.reload() on resize event on scroll element, because iframes have wrong size after sticky recal method.
+1 on this.
Would a suitable solution involve being able to designate what the overflow container is as an option when initialising the plugin?
Actually, Waypoints Sticky plugin does this already. For now I've switched to that whenever possible.
Is there any way to Stick inside a div instead of body or Let sticky element work inside overflow: scroll containers now?
@ale24 I'm not aware of a solution in Sticky Kit. As I already said, I've switched to Waypoints Sticky plugin.
@tegola Do you have any examples with parallel scrolling sidebars in Waypoints Sticky plugin, cause I am not familar with this plugin at all?
I do not have an example for something like that, sorry.
Keep in mind that Waypoints' Sticky plugin needs you to make the work for calculating the offsets, while Sticky Kit does them for you (which, I think, is the reason it still doesn't support sticky elements in divs).
Was there ever any update on this? I still can't use it on any div that isn't the body scroll event.
