css - 确保内容位于视口中

Question

我正在尝试设计一个适用于许多不同类型显示尺寸的页面。现在我有一个重要的内容（基本上是一个显示当前状态的小矩形），它绝对位于一个相对定位的容器内。当页面加载到具有大屏幕的设备中时，这会提供所需的行为：内容显示在预期位置的“首屏”（无需滚动）。

对于具有小屏幕的设备（或者，我认为是未最大化的浏览器），以便该框出现在第一个屏幕之外，我希望该框显示在页面底部，直到用户向下滚动到足够远将盒子返回到其正常位置，此时它应该恢复该位置。（是的，如果用户向下滚动足够远，它应该滚动到页面顶部。）

我以前见过这种动态效果，所以这绝对是可能的。（在http://googleblog.blogspot.com/上使用了一些不完全不同的东西。）但是它是如何完成的呢？我认为没有使用 Javascript，尽管我可能是错的。

显然，媒体查询不会获得所需的行为，因为这可能会给它一个固定的位置，但不会以所需的方式转换。

Answer 1

可以肯定的是，如果没有 javascript，这将无法完成，而且一点 jQuery 也不会受到伤害！

我会大致这样做。

<div id="box"></div>

$(window).bind('scroll', function() {

    if($('#box').position().top >= $(window).height()) {    // if box is outside window do this
        // position box inside window
        $('#box').css({ top: /* pixels go here */ });
    } else if(/* box is inside window */) {

    }

});