Question

目前我正在使用backstretch（http://srobbin.com/jquery-plugins/backstretch/）并使用平滑滚动来锚定到我的单页网站的100％高度部分。我正在尝试合并stellar.js视差（http://markdalgleish.com/projects/stellar.js/），但我遇到了各种各样的问题。是否有一种简单的方法可以使用100％高度div进行此操作？我有4个高度为100％的div，并希望它们以不同的速度滚动。目前我正在对着窗户运行。

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>

Parallax（stellar.js）

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

Answer 1

你复制代码时犯了错误吗？导致js应该抛出错误。如果您在ff或chrome dev工具上使用firebug，您将能够在控制台中看到错误。我相信＆＃34; horizontalScrolling：false＆＃34;属于stellar（）方法作为配置参数，如下所示 -

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

我之前没有使用过stellar.js的经验，因此无法确定这会解决您的问题。

Answer 2

你有没有理由不直接使用CSS？

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

基本上，如今对background-size的支持非常好。

尝试调整小提琴中的窗格大小以查看效果。

具有100％高度div的视差

2 个答案: