Question

我创建了一个视差背景，视差背景以与内容不同的速度移动。我已经稍微修改了Codepen中的这个jQuery代码，以便将1px添加到＆background;背景位置y＆＃39;当页面滚动时。

<script>
    jQuery(function($) {
        $(window).scroll(function(e) {
            parallax();
        });

        function parallax() {
            var scrolled = $(window).scrollTop();
            $('.wsite-section-bg-image').css('background-position-y', -(scrolled * 0.1) + 'px');
        }
    });
</script>

＆＃39; background-position-y＆＃39;已经使用CSS为视差背景设置了，但是当jQuery代码触发时，它从＆＃34; 0＆＃34;开始后台位置y。而不是其固有的CSS位置，导致图像中出现突然的混乱。

可以添加到此代码中，以便jQuery代码添加＆＃39; 1px＆＃39;到了背景位置y＆＃39;固有的CSS位置而不是从＆＃34; 0＆＃34;？

开始

Answer 1

一切乘以0等于零。为什么不使用' - '来设置变量值：

$('.wsite-section-bg-image').css('background-position-y', -(scrolled - 10) + 'px');

Answer 2

为什么不尝试不同的东西。我从未见过css background-position-y并认为这是Internet Explorer特别之处。这种方法绕过了整个零问题

<script>
function scrollSomething () {
    var x = $(document).scrollTop();
    // < 1 for slower scroll and > 1 for faster scroll
    var scrollSpeed1 = x * 0.7;
    var scrollSpeed2 = x * 0.5;
    var scrollSpeed3 = x * 1.25;
    var hBckgd1 = $(".background1").height(); // get height
    var hBckgd2 = $(".background2").height(); // get height
    $("background1")css({"top": scrollSpeed1 + "px"});
    $("background2")css({"top": scrollSpeed2 + hBckgd1 + "px"});
    $("background3")css({"top": scrollSpeed3 + hBckgd1 + hBckgd2 + "px"});
    }
window.addEventListener("scroll", scrollSomething);
</script>

如何添加＆＃34; 1px＆＃34;没有从＆＃34; 0px＆＃34;？开始？

2 个答案: