Stellar.js背景不滚动
Stellar.js background not scrolling
我正在尝试使用Stellar.js脚本来应用视差效果。
以下是Mark Dalgleish网站上的官方示例http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
即使当我复制并粘贴示例中的源代码时,它们也会出现在固定的位置,而不是对每个图像都有轻微的滚动效果。
我做错了什么?
1。如果甚至Demo代码也不起作用,请检查您是否正确地提供了jquery或stellar.js路径。如果有任何错误,您可以在浏览器控制台中进行检查。如果控制台无法加载资源,它将打印它。
2。如果路径正确,请检查页面加载时是否运行了恒星的初始化,或者是否为正确的元素提供了"数据恒星背景比率"属性。如果你给数据恒星背景比"0",它也不会滚动。请注意,它在移动设备上也不起作用。
3。如果您检查了上面的所有内容,但仍然不起作用,请尝试在元素的末尾插入脚本。有时它会有所帮助。类似这样的东西:
<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>
在调整浏览器窗口大小之前,我的stellar.js
视差滚动无法初始化。我发现$.stellar('refresh');
似乎解决了这个问题。(使用AngularJS)
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
相关文章:
- 背景图像顶部的滚动图像不移动
- 修复弹出框并使背景滚动
- 背景滚动,内容上下匹配
- 缩小并更改滚动时的背景导航栏
- 试图让我的引导程序navabar背景淡出滚动在我的wordpress主题
- 导航栏在向下滚动时会更改背景,但在向上滚动时不会更改回来
- 使用 jQuery 限制滚动时的垂直背景位置
- 向上滚动导航栏背景淡出
- 滚动的背景图像仍在闪烁
- 如何创建具有滚动背景图像的可滚动文本区域
- 连续滚动背景
- jQuery 在滚动背景上动画颜色不变
- 视差滚动背景图像自动放大和缩小
- 如何使网站滚动背景不移动和工具栏自动最小化
- 在Javascript或CSS缓慢滚动背景
- 引导模式滚动背景内容
- HTML5画布/JavaScript(滚动背景/相机)
- 我想使页面与固定的内容和滚动背景
- jQuery/CSS:固定覆盖不允许滚动背景
- 动态jQuery CSS具有三状态滚动背景位置根据状态变化