jquery - 恒星 js 不工作

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 一起使用。您应该会在开发工具控制台中看到以下错误(或类似的错误):

Uncaught TypeError: f.getClientRects is not a function

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