我正在尝试设计一个适用于许多不同类型显示尺寸的页面。现在我有一个重要的内容(基本上是一个显示当前状态的小矩形),它绝对位于一个相对定位的容器内。当页面加载到具有大屏幕的设备中时,这会提供所需的行为:内容显示在预期位置的“首屏”(无需滚动)。
对于具有小屏幕的设备(或者,我认为是未最大化的浏览器),以便该框出现在第一个屏幕之外,我希望该框显示在页面底部,直到用户向下滚动到足够远将盒子返回到其正常位置,此时它应该恢复该位置。(是的,如果用户向下滚动足够远,它应该滚动到页面顶部。)
我以前见过这种动态效果,所以这绝对是可能的。(在http://googleblog.blogspot.com/上使用了一些不完全不同的东西。)但是它是如何完成的呢?我认为没有使用 Javascript,尽管我可能是错的。
显然,媒体查询不会获得所需的行为,因为这可能会给它一个固定的位置,但不会以所需的方式转换。