css - Apply media query when page scrolled without JS

Question

I want to apply media query only when page scrolled xxxx pixels down Is there any way I can do that with media query without JS?

UPDATED The reason I am asking because none of JS plugins based on offset position are working on iPad, iPhone and Safari, they are not calculating offset properly Fixed position delayed on IOS and Bootstrap scrollspy not working on iPad

So I thought may be I can do that with media query if it is possible.

Answer 1

No you can't do that with a media query, media queries are used to test screen sizes for responsive web design.

You're going to have to use javascript to check scroll position then apply the media query accordingly.