jquery冲突导致其他页面上的jquery不起作用

Question

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

$('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”上方，并将窗口滚动偏移类更改为 .logo

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

$('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

您的主页上没有类名为 amoraeWork 的元素，所以这段代码：

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

尝试访问 offset() 会返回 undefined，而尝试访问未定义的 top 会产生错误。后面的代码没有被执行（主页面上存在的元素和工作中丢失的元素也会发生同样的情况）。

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

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