kovart/sticksy

Problem partially solved with an accordion

andrea-ferrentino opened this issue · 2 comments

Hi, i'm using your plugin on a woocommerce site to sticky the add to cart bar, it works quite good, but i've a problem.

This bar has an accordion inside it, when i open an accordio it goes on overflow and sticky container doesn't move, it update only if i scroll the page back up of about 200px, so i made this script to hardrefresh whene i click on an item in the widget.
it quite works, but obviously it refreshes after some time, so you can see an overflow then after half second it jumps up, obviously i can't hide this overflow cause the sticky element is in absolute position....

can you suggest something? or some bugfix directly to the plugin?
thanks a lot

var stickyEl = new Sticksy('.js-sticky-widget', {
topSpacing: 85,
listen: true
})
stickyEl.onStateChanged = function (state) {
if(state === 'fixed') stickyEl.nodeRef.classList.add('widget--sticky')
else stickyEl.nodeRef.classList.remove('widget--sticky')
}

let timeOut;
jQuery('.js-sticky-widget *').click(function () {
console.log('click');
clearTimeout(timeOut);
timeOut = setTimeout(function () {
console.log('refresh');
stickyEl.hardRefresh();
}, 700)
});

image

It's hard to say without code.

Is it possible to send a simplified demo of the situation with the accordions?

Hi @kovart
Here is my solution for accordion or tabs

var stickyEl = new Sticksy('.abc-sticky-widget', {
        topSpacing: 60,
    })
    stickyEl.onStateChanged = function (state) {
        if (state === 'stuck') {
            stickyEl.hardRefresh()
        }
    }