带有 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 属性，它不会被删除，就像其他属性被禁用后一样。请看下文。

有人可以解释为什么会出现这个问题吗？有人可以提供解决方案吗？

这是 cmets 中的人的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来调整速度。