使用jquery的动态css属性（在滚动上）

Question

我有一个英雄部分，有一个背景图像。我希望通过滚动编辑background-position属性来创建视差效果。我有一个JavaScript文件，如下所示：

$(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。

提前致谢。

Answer 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 section</h1>
</div>

<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

当然，您可以编辑*0.5来调整速度。