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

Question

我添加了parallax.js jQuery插件，效果起作用，但效果不好。背景放大，圖像滾動時出現毛刺。我添加了文檔中列出的其他變量來解決這些問題，並且它們按預期工作。然而，他們還意外地破壞了我在'#sections'div中使用JS動態創建的內容，這是一個用JavaScript對象填充的空白div？

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

我最終改變了腳本並添加了parallax documentation中的一些變量。雖然此解決方案確實修復了功能，但現在放大了背景圖像。儘管不完美，但此功能確實解決了我發佈的初始問題。

(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);