Horizontal scroll issue

[dmitry]

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):

[hlehmann]

I have got the same problem it stay fixed during an horizontal scroll

[bogdangi]

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);

[dmitry]

@bogdangi thanks for the snippet. I also hope that the maintainer of this plugin will include the fix right in it's core.

[bogdangi]

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.

[cuthulino]

Hey, can someone tell me where to put the workaround code in? I tried and tried but i can not find out...

[wyne]

Here's a clean solution: http://jsfiddle.net/wyne/gyp3kfbu/

[utilmind]

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);
    }
});