jQuery 視差背景問題

Question

我有以下 jQuery 代碼來為具有視差效果的背景圖像設置動畫。

我的頁面上有兩個視差圖像，似乎位於更下方的第二個圖像的背景 position 已經超出了 position。 我相信這是因為 scrollTop function 從網站頂部不斷變化，而不是背景圖像所在的 div 頂部。

我從這里得到代碼https://gist.github.com/omgmog/7198844

關於如何解決這個問題的任何想法？

我已將其添加到此處的 JSFiddle 以幫助某人解決問題-

jsfiddle.net/Ls0ftxvq/

    $(function() {
        var $el = $('.parallax-background');
        $(window).on('scroll', function () {
            var scroll = $(document).scrollTop();
            $el.css({
                'background-position':'center '+(-.4*scroll)+'px'
            });
        });
        $(window).scroll();
    });

Answer 1

為什么不只使用 CSS 來做視差效果？ 刪除您的 javascript 並將此代碼添加到您的 css 文件中

.full-heignt {
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
}

你有一個基於你的代碼的例子