Open dmitry opened 10 years ago
I have got the same problem it stay fixed during an horizontal scroll
We use this workaround, to recalculate horizontal scrolling.
/* Workaround to fix horizontal scrolling for sticky contents.
*
* When do horizontal scroll or resize window it does not handle it
* properly.
*/
update_horizontal_scroll = function () {
$content
.each(function () {
var calculated_left, self;
self = $(this);
if (self.css('position') === 'fixed') {
calculated_left = self.parent().offset().left - $(window).scrollLeft();
} else {
calculated_left = 0;
}
self.css('left', calculated_left + 'px');
});
};
$content
.on('sticky_kit:stick', update_horizontal_scroll);
$(window)
.on('resize', update_horizontal_scroll)
.on('scroll', update_horizontal_scroll);
@bogdangi thanks for the snippet. I also hope that the maintainer of this plugin will include the fix right in it's core.
I also prepared example for it here http://jsfiddle.net/zog1jh29/1/
When you scroll e little bit to start stuck elements and after scroll horizontal the sticky element float on it.
Hey, can someone tell me where to put the workaround code in? I tried and tried but i can not find out...
Here's a clean solution: http://jsfiddle.net/wyne/gyp3kfbu/
Solution at http://jsfiddle.net/wyne/gyp3kfbu/ works good, except initial position (when the page content horizontally scrolled to right and the page being reloaded).
So you should force trigger the "scroll" event after the content loaded.
$(window).on("load", function(){
if ($(window).scrollLeft() > 0) // only if the viewport scrolled horizontally
$(window).scroll(); // trigger again for sure
});
$(function() {
if ($(window).scrollLeft() > 0) {// only if the viewport scrolled horizontally
$(window).scroll(); // trigger again for sure
setTimeout(function(){
$(window).scroll(); // trigger again for sure
}, 300);
}
});
It doesn't work well, when I'm scrolling horizontaly.
It works when it's on the top (because no absolute positioning used in this case):