javascript - 显示全屏图像 100% 高度和 100% 宽度但能够向下滚动

Question

我想创建一个全屏图像，让我可以向下滚动页面，就像这里的苹果网站一样。

http://www.apple.com/uk

您会注意到，通过调整浏览器的大小，图像保持全屏显示，但它允许您向下滚动到页脚。

这可以在 jquery 中完成还是需要 javascript？

到目前为止，我仅有的代码是使图像全屏显示的 css 代码:

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

这是一把 fiddle http://jsfiddle.net/XXHgJ/

如果您向下滚动页脚显示但菜单保持不动，则需要向上滚动。

Answer 1

如果你只想做一个全屏元素，你可以用 jQuery 来做:

jQuery:

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

现场演示:http://jsfiddle.net/XXHgJ/7/