我有一个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 +'%)'正确添加了变量?

最佳答案

您在元组中缺少“,”

 $('#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 +'%)'
    });

  }

});

关于javascript - 我将整个JS文件放在无法单独使用的新函数中后无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55761744/

10-11 22:28
查看更多