在没有 JS 的页面滚动时应用媒体查询答案

【问题标题】：Apply media query when page scrolled without JS在没有 JS 的页面滚动时应用媒体查询
【发布时间】：2014-01-13 09:25:22
【问题描述】：

我只想在页面滚动时应用媒体查询xxxx pixels down 有没有什么办法可以在没有 JS 的情况下使用媒体查询来做到这一点？

更新我之所以问是因为基于偏移位置的 JS 插件都不能在 iPad、iPhone 和 Safari 上运行，它们没有正确计算偏移量Fixed position delayed on IOS 和 Bootstrap scrollspy not working on iPad

所以我想如果可能的话，我可以通过媒体查询来做到这一点。

【问题讨论】：

【解决方案1】：

不，您不能使用媒体查询来做到这一点，媒体查询用于测试响应式网页设计的屏幕尺寸。

您将不得不使用 javascript 检查滚动位置，然后相应地应用媒体查询。

【讨论】：

【解决方案2】：

你可以使用 twitter bootstrap scrollspy 方法：http://getbootstrap.com/javascript/#scrollspy

【讨论】：

【解决方案3】：

媒体查询无法做到这一点，但您可以使用 JavaScript 做到这一点。如果您在使用 ScollSpy 时遇到问题，可以查看 Waypoints。这适用于移动设备，是您工具带中的一个令人难以置信的库。这将使您对用户的滚动位置做出反应。

【讨论】：