使用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);