0

目前，我正在使用带有平滑滚动的 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>

视差 (stellar.js)

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

2 回答 2

0

有什么理由不直接使用 CSS 吗？

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

基本上，这些天对的支持background-size非常好。

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

于 2013-05-16T17:39:44.020 回答
0

你在复制代码时犯了错误吗？导致js应该抛出错误。如果您在 ff 或 chrome dev 工具上使用 firebug，您将能够在控制台中看到错误。我相信“horizo​​​​ntalScrolling：false”属于stellar（）方法作为这样的配置参数 -

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

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

于 2013-05-16T17:27:17.093 回答