2

在过去的 3 个小时里，我一直试图让 skrollr 向我展示任何东西！我尝试在正文之前，在标题中调用脚本，并尝试了一大堆教程来尝试让它工作，但我不确定为什么它根本不起作用。

在<head>我有

<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/go-skrollr.js"></script>

好的，根据@melc 我做了一些更改，下面的一个是主要的。仍然没有运气。

(function() {
    $(document).ready(function(){skrollr.init();});
})();

在我的摘要行（导航正下方的div）中，我有

<div class="container" data-center="opacity: 1" data-200-top="opacity: 0" data-anchor-target="#summary h3">

据我所知，当 h3 距离顶部 200 像素时，这应该会使该容器内的内容消失。

我试过用很多不同的方式来称呼它，但还是没有运气！

现场直播

4

1 回答 1

2

此时存在三个问题，如果得到纠正，您将看到Skrollr.js实际效果（这已在 OP 中给出的站点上进行了测试，并且可以正常工作）。

问题 1 -data-anchor-target="#summary h3"必须修改为data-anchor-target=".summary h3"

问题2 -.hero元素必须没有height:100%，只需将其注释掉，因为它在初始化后skrollr由于某种原因达到了6k像素的高度，可以稍后检查。

问题 3skrollr -必须进行正确的初始化。现在在控制台上Uncaught ReferenceError: $ is not defined显示消息并引用go-skrollr.js文件。这是因为jQuery在引用库文件之前必须包含skrollr.js库文件。

于 2014-03-16T15:47:58.643 回答