css - 确保内容位于视口(viewport)中

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 */) {

    }

});