2

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

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

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

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

4

1 回答 1

0

可以肯定的是,如果没有 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 */) {

    }

});
于 2012-06-22T03:09:02.593 回答