css - 如何使用 css 将项目放在屏幕顶部的正上方？

Question

我正在制作一个将幻灯片动画滑出屏幕的页面。这就是我目前的做法。

var previousOffset = ($(window).height())*-1;
previousOffset = previousOffset+'px'
$('.current').animate({
    top: previousOffset,
}, 500, function(){...}

我想知道，有没有一种更清洁的方法，使用纯 CSS，无需测量屏幕的高度。目前，该项目有position:absolute，但这不是要求。

目前要清楚 .current 的 css 是：

.current{
  top: -"height of screen";
  position: absolute;
}

我想在没有“屏幕高度”的情况下做到这一点。

Answer 1

指定位置，fixed然后将顶部设置为适当的负值。

.current{
    position: fixed;
    height: 10px;
    top: -10px; /* This will need adjusted */
}

工作示例：http: //jsfiddle.net/UH4p7/

Answer 2

这可能很大程度上取决于您的其他标记，但您可以尝试将.current元素的高度设置为 100% 并只处理百分比。这将为您隐式处理窗口大小的调整。

请注意，您必须将 html & body 元素设置为 100% 才能正常工作。

CSS

html, body {
    margin:0;
    height:100%;
}

.current { 
    position:absolute;
    height:100%;
    width:100%;
}

JS

$('#nextButton').click(function(){
    $('.current').animate({
        top: '-100%'
    }, 500, function(){
       // do something
    }); 
});

演示

http://jsfiddle.net/GoranMottram/BQdtm/