使用Parallax.js jQuery插件放大背景圖片

Question

我添加了parallax.js jQuery插件，並且效果正常，但是不正確。 背景放大，並且圖像在滾動時出現故障。 我添加了文檔中列出的其他變量來解決這些問題，並且它們按預期工作。 但是，出乎意料的是，它們也會破壞我在“ #sections” div（使用JavaScript對象填充的空div）中使用JS動態創建的內容？

function parallaxBackground (){
    var yPos = -(($window.scrollTop() - $this.offset().top) / 5);// Scroll speed      
    var coords = '1% '+ yPos + 'px';// Background position       
    $this.css({ backgroundPosition: coords });// Move the background
}   
parallaxBackground();//Call parallaxBackground function

知道為什么該函數會刪除使用JS創建的HTML內容嗎？ JS的其余部分仍然有效，只是``#sections''div停止工作。 滾動，顯示和懸停效果仍保持不變。 這是代碼的鏈接。

https://gist.github.com/flyspaceage/075dcf3a6d6bd65edf0f456036eb9bd8

請閱讀FlySpaceAge的評論以獲取更多信息。

Answer 1

我最終對腳本進行了一些更改，並從視差文檔中添加了一些變量。 雖然此解決方案確實修復了該功能，但是現在放大了背景圖像。雖然不完美，但此功能確實修復了我發布的最初問題。

(function($){
$(document).ready(function(){
    $('#sections').on('click', '.back-to-top', scrollToTop);
    $('#jump-menu li').click(scrollToAnchor);
    $('.parallax-window').parallax({imageSrc: '../images/background.png'});     
});

function scrollToTop(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: 0
    }, 500);
}

function scrollToAnchor(event){
    event.preventDefault();

    var target = $(this).attr('rel');
    var offset = $(target).offset();

    $('html, body').animate({
        scrollTop: offset.top - 270
    }, 500);
}

/* PARALLAX functionality*/
function parallaxBackground (){

    var parallaxWidth = Math.max($(window).width() * 1, 1 ) | 0;

    $('.parallax-window').width(parallaxWidth); 

}

parallaxBackground();


})(jQuery);