kovart / sticksy Goto Github PK

Hi

Is it possible to change the topSpacing value "on-the-fly"? We have a responsive sticky header that changes height during scroll or resize (and at some point disappears completely) and a sidebar that has always the same distance to the header (or the top document border if the header is not visible). If we scroll, the sidebar pans with a spacing (like 50px) from the header that is 100px in height. So the sidebar should be positioned 150px from the top document border. If the header shrinks to 50px, the sidebar should be 100px from the top document. And if the header dissapears completely, the sidebar distance between document top and sidebar should be 50px. Is this possible with your sticky plugin? Can I overwrite the topSpacing value while the script is already running? Or does topSpacing support a dynamic function?

When switching between mobile and desktop, disable and enabling is not working.

Is it possible to make it sticky to the bottom of the page instead of the top of the page?
I can't seem to find the option.

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

We have a similar problem as #10 with a collapse (bootstrap) inside a sticky element.
Since the height is a fixed style property on the sticky element which only updates after the collapse is finished we get this jump in height all of a sudden. Is there a way to fix this?

You can find a recording of whats happening in the attachment.

Hi,

sticksy lib in not exported as ES6 module, so how can I use it in eg. Angular app?
For example

import Sticksy from 'sticksy';

in component ts file does not work (sticksy is not ES6 module)

Tried

$(window).on('load resize orientationchange', function () {
	if (window.matchMedia("(min-width: 768px)").matches) {
		var stickyEl = new Sticksy('.s-cont > .sticky');
		stickyEl.hardRefresh()
	}else{
		Sticksy.disableAll(); ///seems do not clean the markup
	}
});

But after that i see a LOT of sticksy hidden nodes and element mispositioned till the page reload.

How to refresh state after window resize and clear the markup when sticky functionality is not needed?

Hi, thanks for the plugin, it's really great.

I was wondering if you can tell me how to enable and disable with jquery? I want to disable on smaller screen size (mobile).

$('.sticky-element').sticksy({
    topSpacing: 20,
    listen: true
});

Thanks