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

// WORK 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


});

我已经尝试了很多东西，当我移动工作页面脚本时，我已经做了很多事情。上面的主页脚本＆＃39;工作页面开始工作但主页没有。我真的不知道为什么会这样。我已经尝试为主页脚本下面的工作页面创建一个新功能，但仍然有同样的问题。

我找到了一种方法让他们都工作，这是通过移动＆＃39;工作页面脚本＆＃39;上面的主页脚本＆＃39;并将窗口滚动偏移类更改为.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并尝试访问undefined上的 top 会产生错误。不执行其后面的代码（主页上存在的元素也会发生同样的情况）。

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

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

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

1 个答案: