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

我试图在一个站点上产生一个视差效果，但是两个页面之间的jquery似乎是冲突的。在主页上，当你向下滚动时，所有的元素都会像它们应该的那样移入，但是当你转到工作页面并向下滚动时，什么都不会发生。以下是Jquery原样（为了便于阅读，我将在代码块中保留注释）：

//主页脚本

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


});

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() / 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


});

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


});

我尝试了很多方法，当我将“工作页面脚本”移到“主页脚本”上方时，工作页面开始工作，但主页没有。我真的不知道为什么会这样。我曾尝试在主页脚本下面为工作页面创建一个新函数，但仍然存在相同的问题

我找到了一种方法，将“工作页面脚本”移到“主页脚本”上方，并将窗口滚动偏移类更改为.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

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


});

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


});

---

主页面上没有类名为amoraeWork的元素，因此以下代码：

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

尝试访问offset（）返回undefined，尝试访问undefined上的top会产生错误。它后面的代码不会执行（主页上出现的元素和工作中缺少的元素也会发生同样的情况）

在访问元素的offset（）和top值之前，应检查元素是否存在：

---

在这种情况下，请尝试使用jQuery noConflict。@stanze:在jQuery与另一个同样适用于

$

的JS库相邻使用时非常有用。我不熟悉jQuery.noConflict。。。我得到了一个向我解释问题的答案。谢谢，不过，我会调查jquery，我明白了，没有冲突！！我改变了它，使用了一个名为section trigger的空类，并使用它来触发视差。因此，如果jquery中途出现错误，它会不会在错误之后执行任何操作？我还没有上传的工作版本，但它的工作，谢谢！！因此，如果jquery中途出现错误，它会不会在错误之后执行任何操作？我懒得去看现场代码，但捕捉得很好。删除我的帖子并给你+1。干得好。@ironmike不，幸运的是没有。空集上的jQuery方法不会产生错误，它们只是不做任何事情（例如$（'.nonExistantClass'）.addClass（'foo'）.hide（））。但是，您从一个不存在的jQuery元素请求属性，该元素返回undefined，并且试图访问undefined上的属性（top）是导致错误的原因。@ironmike…即使执行某些操作会在不存在的元素上导致错误，您不应该在页面上添加不需要的类名，只需检查元素是否存在（如我在上面的示例中所示）。