Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Window resize listener? #7

Closed
sashabeep opened this issue May 21, 2021 · 2 comments
Closed

Window resize listener? #7

sashabeep opened this issue May 21, 2021 · 2 comments
Labels
question Further information is requested

Comments

@sashabeep
Copy link

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?

Снимок экрана 2021-05-21 в 15 39 33

@kovart
Copy link
Owner

kovart commented Jun 7, 2021

Looks like you initialize Sticksy instance each time you match the media query.

if (window.matchMedia("(min-width: 768px)").matches) {
		var stickyEl = new Sticksy('.s-cont > .sticky');

You need to initialize sticky element once and then use the instance methods when you match the query.
Fixed version:

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

@kovart kovart added the question Further information is requested label Jun 7, 2021
@sashabeep
Copy link
Author

@kovart Looks like once it inited it works without any listeners to window resize

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants