我花了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像素时,这应该会使该容器内的内容消失。
我试过把它称为一堆不同的方式,仍然没有运气!
答案 0 :(得分:2)
此时有三个问题,如果得到纠正,您会看到Skrollr.js
在行动中(已经在OP中给出的网站上进行了测试并且它有效)。< / p>
第1期 - data-anchor-target="#summary h3"
必须修改为data-anchor-target=".summary h3"
问题2 - .hero
元素不得有height:100%
,只需将其注释掉,因为skrollr
初始化后它的高度达到6k像素由于某种原因,可以在以后检查。
问题3 - 必须正确初始化skrollr
。现在,在控制台上显示消息Uncaught ReferenceError: $ is not defined
,并将其引用到go-skrollr.js
文件。这是因为在引用jQuery
库文件之前必须包含skrollr.js
库文件。