Question

我试图在我的网站上创建一个视差效果，并且我按照main source的说明完全按照指示操作，但它仍然无法正常工作。以下是代码段。

HTML

<div id="home-section" data-stellar-background-ratio="0.5"></div>
<div id="site"></div>

CSS

#home-section {
    background-image: url(inspiration.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
    position: relative;
}
#site {
    height: 4000px;
    width: 100%;
    position: relative;
}

JQ

<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script>
$.stellar();
</script>

这里是codepen。

Answer 1

由于不再支持，Stellar不适用于 jQuery 3.x 。您应该在dev工具控制台中看到以下错误（或与此类似的东西）：

未捕获的TypeError：f.getClientRects不是函数

使用 jQuery 2.x 版本，无需进一步更改即可使用。

Stellar js不工作

1 个答案: