我有一个英雄部分有一个背景图像。我希望通过在滚动上编辑background-position
属性来创建视差效果。我有一个JavaScript文件,该文件是如下:jQuery的动态CSS属性(在滚动)
$(document).ready(function() {
$(window).on('scroll', function() {
// Parallax effect
parallax.effect(); // TODO: rename this function
});
});
// Global variables
var currentWindowPos = $(window).scrollTop();
var parallax = {
// Variables
element: $('.hero.hero-bg'),
bgPosition: 0,
// Functions
effect: function() {
$(parallax.element).css({
'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px'
});
}
};
我已删除等动态效果,如增加类导航栏一旦页面已滚动超过一定点。我可以在Chrome中看到元素获取动态background-position
属性,但该图像似乎没有做任何事情。
在Chrome中,如果我手动进入开发人员工具并添加background-position
属性并使用箭头键增大或减小文本字段中的值,则可以看到图像上下左右移动。
而且在Chrome中,如果我试图勾去掉在element.style
部分CSS属性,它不打通一击,就像其他的属性,一旦他们已被禁用。请看下面。
有人能解释为什么这个问题正在发生,会有人提供解决方案?
这是一个JSFiddle在评论中的人。
在此先感谢。
可以请你分享你的jsfiddle或代码来详细了解问题吗? – JSnewbie
已编辑。请参阅更新的问题。 –
好吧现在你想要什么? 你想要整个div的背景图片? – JSnewbie