使用 Parallax.js jQuery 插件时放大背景图像答案

【问题标题】：Background image zoomed in while using Parallax.js jQuery plugin使用 Parallax.js jQuery 插件时放大背景图像
【发布时间】：2017-08-02 06:16:25
【问题描述】：

我添加了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 的评论以获取更多信息。

【问题讨论】：

标签： javascript jquery parallax parallax.js

【解决方案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);

【讨论】：