视差与100%高度div

Question

目前我正在使用backstretch (http://srobbin.com/jquery-plugins/backstretch/)与平滑滚动锚定到100%的高度部分我的一页网站。我试图纳入恒星。js视差(http://markdalgleish.com/projects/stellar.js/)，但我有各种各样的问题。是否有一个简单的方法，使这个工作与100%的高度跳水?我有4div与100%的高度，并希望他们以不同的速度滚动。目前我正在运行恒星对窗口。

HTML

<div class="main-container" data-stellar-ratio="0.5">
<div class="main-container2" data-stellar-ratio="2">
<div class="main-container3" data-stellar-ratio="0.5">
<div class="main-container4" data-stellar-ratio="2">

CSS

.main-container {
background-image:url(../images/footballfieldblur.jpg);
min-height:100%;
height:100%;
z-index:-100;
position:relative;
}
.main-container2 {
background-image:url(../images/orange3.png);
min-height:100%;
height:100%;
position:relative;
}
.main-container3 {
background-image:url(../images/lightbackground.jpg);
min-height:100%;
height:100%;
position:relative;
}
.main-container4 {
background-image:url(../images/gopherbackground.png);
min-height:100%;
height:100%;
position:relative;
}

Javascript (backstretch.js)

<script>
// You may also attach Backstretch to a block-level element
$(".main-container").backstretch("images/footballfieldblur.jpg");
$(".main-container2").backstretch("images/orange3.png");
$(".main-container3").backstretch("images/lightbackground.jpg");
$(".main-container4").backstretch("images/gopherbackground.png");
</script>

视差(stellar.js)

$(document).ready(function() {
      $(window).stellar(); 
      horizontalScrolling:false 
    });
    </script>

Answer 1

为什么不直接使用CSS呢?

小提琴:http://jsfiddle.net/uzKFu/1/

基本上，这些天对background-size的支持是相当好的。

试着调整面板的大小，看看效果。

Answer 2

你在复制代码时犯了错误吗?导致js应该抛出一个错误。如果你使用firebug on off或chrome dev工具，你将能够在控制台中看到错误。我认为"horizontalScrolling:false"属于stellar()方法的配置参数，就像这样-

$(window).stellar({horizontalScrolling:false});

我之前没有任何使用stellar.js的经验，所以不能肯定地说这将解决你的问题。