添加jQuery视差功能后JS文件失效，请求排查问题

首先，你的新增代码里有两个致命的语法错误，这就是导致整个JS文件功能全部崩溃的核心原因——JavaScript是解释型语言，一旦遇到语法错误，浏览器会直接停止解析后续所有JS代码。

错误1：视差代码的闭合括号顺序颠倒 #

在你的视差效果代码末尾，你写的是：

)}; 

这明显是括号顺序搞反了，正确的闭合写法应该是：

});

这个错误会直接触发语法报错，让后续所有JS代码都无法执行。

错误2：Recipe Cards动画的CSS属性缺少分隔逗号 #

在设置卡片图片的css()方法时，每个属性键值对之间必须用逗号分隔，但你写的代码里漏掉了这个关键符号：

$('#recipeStack img:nth-child(4)').css({ 'transform' : 'translate(160px, -160px)' 'opacity' : '1' });

这里transform和opacity两个属性之间没有逗号，所有类似的行都需要补上这个逗号，否则同样会触发语法错误。

关于你怀疑的translate变量拼接 #

你提到的这段代码：

$('.logo').css({ 'transform' : 'translate(0px, '+ wScroll /2 +'%)' });

写法完全正确，字符串拼接的逻辑没有问题，这个地方不是导致崩溃的原因。

修正后的完整新增代码 #

// Creates a parallax effect for the home page. 
var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){ 
  var wScroll = $(this).scrollTop();
  if (wScroll <= pContainerHeight) { 
    $('.logo').css({ 'transform' : 'translate(0px, '+ wScroll /2 +'%)' });
  }
}); 

// Expands recipe cards animation when in viewport 
$(window).scroll(function() { 
  var hT = $('#recipeStack').offset().top, hH = $('#recipeStack').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop();
  if (wS > (hT+hH-wH)){
    $('#recipeStack img:nth-child(4)').css({ 'transform' : 'translate(160px, -160px)', 'opacity' : '1' });
    $('#recipeStack img:nth-child(3)').css({ 'transform' : 'translate(120px, -120px)', 'opacity' : '.8' });
    $('#recipeStack img:nth-child(2)').css({ 'transform' : 'translate(80px, -80px)', 'opacity' : '.6' });
    $('#recipeStack img:nth-child(1)').css({ 'transform' : 'translate(40px, -40px)', 'opacity' : '.4' });
  }
});

把修正后的代码替换掉原来的新增代码，你的JS文件应该就能恢复正常功能，视差效果也能正常工作了。

内容的提问来源于stack exchange，提问作者Jake