javascript - 当我放入一个无法自行运行的新函数后，整个 JS 文件无法运行

Question

我有一个 JS 文件，我尝试通过 Jquery 添加视差功能，但它似乎不起作用，也破坏了整个文件的功能。

我想知道我是否在某个地方犯了错字，或者是否有其他原因导致了该问题。

这是我的 JS 文件(它本身就可以正常工作):

// This enables bootstrap tooltips.
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Fades out (and dismisses) bootstrap alerts after 5 seconds.
window.setTimeout(function() {
  $('.alert').fadeTo(500, 0, function(){
    $(this).remove();
  });
}, 5000);

// Use this instead of href="javascript:void(0);" to avoid violating the Content Security Policy on CSP-enabled HTTPS.
// This prevents the empty link from scrolling to the top of the page AND from adding a # to the URL.
$('a[href="#"]').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});

// Hides the navbar when scrolling down and reveals it when scrolling up.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById('navbar').style.top = '0';
  } else {
    document.getElementById('navbar').style.top = '-56px';
  }
  prevScrollpos = currentScrollPos;
}

这就是事情变得困惑的地方:

// 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'
    });

  }

});

我认为问题出在这段代码中:

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

我是否通过 'translate(0px, '+ wScroll/2 +'%)' 正确添加了变量？

Answer 1

你的元组中缺少“，”

 $('#recipeStack img:nth-child(3)').css({
      'transform' : 'translate(120px, -120px)',
      'opacity' : '.8'
    });

我只需要将其复制并粘贴到 Sublime 中即可看到问题你错过了最后一个 )} 订单，当我发现我的项目也有同样的问题时，这让我笑了 ==))

var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {

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

  }

});