我有一个英雄部分有一个背景图像。我希望通过在滚动上编辑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在评论中的人。
在此先感谢。
1 回答
您正在使用一个值根本不变的变量。
var currentWindowPos = $(window).scrollTop();
变量currentWindowPos具有初始scrollTop值，即零。你永远不会更新它。正如我能够注意到的那样，您正试图对图像应用视差效果。尝试改变这一行
'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px'
到这样的事情
'background-position': 'center -' + $(window).scrollTop() * 0.5 + 'px'
$(document).ready(function() {
$(window).on('scroll', function() {
// Parallax effect
parallax.effect(); // TODO: rename this function
});
});
var parallax = {
// Variables
element: $('.hero.hero-bg'),
bgPosition: 0,
// Functions
effect: function() {
$(parallax.element).css({
'background-position': 'center -' + $(window).scrollTop()*0.5+'px'
});
}
};.hero {
width: 100%;
height: 34rem;
display: table;
position: relative;
background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7));
background-repeat: repeat-x;
}
.hero.hero-bg {
background-size: cover;
background-position: center;
}
.hero.hero-bg:after {
width: 100%;
height: 34rem;
content: "";
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7));
background-repeat: repeat-x;
}
.hero .inner-wrapper {
width: 100%;
height: auto;
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">script>
<div class="hero hero-bg" style="background-image: url('https://i.ytimg.com/vi/eNB8HLrxcD4/maxresdefault.jpg');">
<h1>Hero sectionh1>
div>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>
<p>contentp>当然，你可以编辑*0.5调整速度。
这家伙很懒，还没有设置简介
