Parallax.js jQueryプラグインを使って拡大した背景画像

Question

parallax.js jQueryプラグインを追加しても効果はありますが、正しくは動作しません。背景が拡大され、スクロール時に画像が不鮮明になります。これらの問題を修正するために、ドキュメントに記載されている追加の変数を追加し、期待通りに機能します。しかし、予期しないことに、JavaScriptオブジェクトを埋め込んだ空のdivである '#sections' 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

スクリプトを少し変更し、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);