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

    }

});

确保内容位于视口中

1 个答案: