Jquery 冲突导致其他页面上的 jquery 无法正常工作

Question

我正在尝试在网站上制作视差效果，但是两个页面之间的 jquery 似乎存在冲突。在主页上，当您向下滚动时，所有元素都会像它们应该的那样移动，但是当您转到工作页面并向下滚动时，什么也没有发生。这是 Jquery 原样（为了便于阅读，我将把注释留在代码块之外）：

$('document').ready(function() {

$('.nav-toggle').click(function() {
  $(this).toggleClass('toggle-animate');
  $('.sidebar').toggleClass('sidebar-animate');
  $('.page-contents').toggleClass('page-contents-animate');

});

});



$(window).scroll(function(){

var wScroll = $(this).scrollTop();
$('.logo').css({
'transform' : 'translate(0px , '+ wScroll /40 +'rem)'
});

//主页脚本

if(wScroll > $('.logo').offset().top - ($(window).height() / 6 )) {
$('.about h1').addClass('about-h1-is-showing');
}

if(wScroll > $('.about h1').offset().top - ($(window).height() / 3.5 )) {
$('.about p').addClass('about-h1-is-showing');
}

if(wScroll > $('.about h1').offset().top - ($(window).height() / 2.5 )) {
$('.about').addClass('about-bg-is-showing');
}

if(wScroll > $('.logo').offset().top) {
$('.symbol').each(function(i){

setTimeout(function(){
$('.symbol').eq(i).addClass('social-is-showing');},
150 * (i+3));
});
}//END HOME PAGE SCRIPT

//工作页面脚本

if(wScroll > $('.logo').offset().top - ($(window).height() / 10 )) {
$('.amorae-desktop').addClass('amorae-desktop-is-showing');
}

if(wScroll > $('.amoraeWork').offset().top - ($(window).height() / 12 )) {
$('.amorae-tablet').addClass('amorae-tablet-is-showing');
}

if(wScroll > $('.amoraeWork').offset().top - ($(window).height() / 8 )) {
$('.amorae-phone').addClass('amorae-phone-is-showing');
}//END WORK PAGE SCRIPT


});

我尝试了很多方法，当我将 'WORK PAGE SCRIPT' 移到 'HOME PAGE SCRIPT' 上方时，工作页面开始工作，但主页没有。我真的不知道为什么会这样。我尝试在主页脚本下方为工作页面创建一个新功能，但仍然遇到同样的问题。

我找到了一种让它们都工作的方法，方法是将 'WORK PAGE SCRIPT' 移动到 'HOME PAGE SCRIPT' 上方，并将 window 滚动偏移量 class 更改为 .logo

这并不理想，因为我想了解问题所在并知道如何解决它。几天来一直让我发疯所以任何帮助或建议将不胜感激。下面是变通代码以及 link 到实时站点。谢谢。

$('document').ready(function() {

$('.nav-toggle').click(function() {
  $(this).toggleClass('toggle-animate');
  $('.sidebar').toggleClass('sidebar-animate');
  $('.page-contents').toggleClass('page-contents-animate');

});

});



$(window).scroll(function(){

var wScroll = $(this).scrollTop();
$('.logo').css({
'transform' : 'translate(0px , '+ wScroll /40 +'rem)'
});

//WORK PAGE SCRIPT

if(wScroll > $('.logo').offset().top - ($(window).height() / 10 )) {
$('.amorae-desktop').addClass('amorae-desktop-is-showing');
}

if(wScroll > $('.logo').offset().top - ($(window).height() / 12 )) {
$('.amorae-tablet').addClass('amorae-tablet-is-showing');
}

if(wScroll > $('.logo').offset().top - ($(window).height() / 8 )) {
$('.amorae-phone').addClass('amorae-phone-is-showing');
}//END WORK PAGE SCRIPT

//主页脚本

if(wScroll > $('.logo').offset().top - ($(window).height() / 6 )) {
$('.about h1').addClass('about-h1-is-showing');
}

if(wScroll > $('.about h1').offset().top - ($(window).height() / 3.5 )) {
$('.about p').addClass('about-h1-is-showing');
}

if(wScroll > $('.about h1').offset().top - ($(window).height() / 2.5 )) {
$('.about').addClass('about-bg-is-showing');
}

if(wScroll > $('.logo').offset().top) {
$('.symbol').each(function(i){

setTimeout(function(){
$('.symbol').eq(i).addClass('social-is-showing');},
150 * (i+3));
});
}//END HOME PAGE SCRIPT


});

Link to live site

Answer 1

您的主页上没有名称为 class amoraeWork 的元素，因此此代码：

$('.amoraeWork').offset().top

尝试访问 offset() returns undefined 并尝试访问 top on undefined 会产生错误。它后面的代码没有执行（主页上存在的元素和工作中缺少的元素也会发生同样的情况）。

在访问它的 offset() 和 top 值之前，您应该检查元素是否存在：

  if($('.amoraeWork').length && wScroll > $('.amoraeWork').offset().top - ($(window).height() / 12 )) { 
        // do work here
  }

Jquery 冲突导致其他页面上的 jquery 无法正常工作

Jquery conflicting causing jquery on other pages not to work

jquery

scroll

parallax