Stellar.js背景不滚动
[英]Stellar.js background not scrolling
问题描述
I'm attempting to use the Stellar.js script to apply a parallax effect. 
我正在尝试使用Stellar.js脚本应用视差效果。
Here is the official example from Mark Dalgleish's website http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html 这是Mark Dalgleish网站http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html上的官方示例
Even when I copy and paste the source code from the example, instead of having a slight scroll effect to each one image, they appear in fixed positions. 即使我复制并粘贴示例中的源代码，它们也不会固定滚动显示在每个图像上，而是对每个图像都有轻微的滚动效果。
What am I doing wrong? 我究竟做错了什么？
2 个解决方案
解决方案1
1 已采纳 2014-04-19 15:16:10
1. If even the Demo code does not work, check whether you gave the jquery or stellar.js path correctly. 1.即使演示代码也不起作用，请检查是否正确提供了jquery或stellar.js路径。 You can check it in browser console, if you have any errors. 如果有任何错误，可以在浏览器控制台中检查它。 The console will print it, if it can't load the resource. 如果无法加载资源，则控制台将打印它。
2. If the paths correct, check if you run the initialisation for stellar, when the page loaded, or if you gave "data-stellar-background-ratio" attribute for the right elements. 2.如果路径正确，请检查是否对星体进行了初始化，在页面加载时运行，还是为正确的元素赋予了“ data-stellar-background-ratio”属性。 If you give '0' to the data-stellar-background-ratio it won't scroll either. 如果您将data-stellar-background-ratio设为'0'，它也不会滚动。 Note that, it won't work on mobile devises either. 请注意，它也不适用于移动设备。
3. If you checked everything above, and it still doesn't work, try to insert the scripts at the end of the element. 3.如果您检查了上面的所有内容，但仍然无法使用，请尝试将脚本插入元素的末尾。 Sometimes it helps. 有时会有所帮助。 Something like this: 像这样：
<html>
<head>
<!-- Title, CSS, and other stuff -->
</head>
<body>
<!-- Content here with right stellar attributes -- >
...
<!-- At the end of body load the scripts, and run initialisation -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).stellar({
scrollProperty: 'scroll',
horizontalScrolling: false,
positionProperty: 'position'
});
</script>
</body>
</html>
解决方案2
0 2015-06-28 16:12:39
I had a situation where my stellar.js parallax scrolling wouldn't initialize until my browser window was resized. 我遇到的情况是，直到调整浏览器窗口的大小后，我的stellar.js视差滚动才会初始化。 I found the $.stellar('refresh'); 我找到了$.stellar('refresh'); seemed to fix the issue. 似乎解决了这个问题。 (Using AngularJS) （使用AngularJS）
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.