javascript - 根据滚动位置交换 div 元素

Question

当滚动位置在 x 和 y(占总数的百分比)之间时，我有一些 jq 在 div 中淡出。我想要做的是当滚动位置在 1000 像素和 2000 像素之间时淡入一对 div(about_me_menu_left 和 about_me_menu_right)。然后当滚动通过 2000px 到 3000px 时，div 应该更改为(gallery_menu_left 和 gallery_menu_right)，最后当在 3000px 和网站底部之间滚动时，应该出现 div(contact_menu_left 和 contact_menu_right)。每组在屏幕顶部都有一个固定位置，当您滚动付费时，就会换成另一组。这就是我所拥有的，前两套有效，但最后一套没有。如果有人能帮助我指出我出错的正确方向，那就太好了。这个脚本只是我在某个地方发现的一个接一个的 6x，据我所知这是我的问题，抱歉我对 JavaScript 很陌生。

JavaScript:

    $(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.210448314190441) && y < (h*.420896628380882) ){
   // if we are show keyboardTips
   $("#about_me_menu_left").fadeIn("fast");
  } else {
   $('#about_me_menu_left').fadeOut('fast');
  }
 });
});

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.210448314190441) && y < (h*.420896628380882) ){
   // if we are show keyboardTips
   $("#about_me_menu_right").fadeIn("fast");
  } else {
   $('#about_me_menu_right').fadeOut('fast');
  }
 });
});

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.420896628380883) && y < (h*.787699147832531) ){
   // if we are show keyboardTips
   $("#gallery_menu_left").fadeIn("fast");
  } else {
   $('#gallery_menu_left').fadeOut('fast');
  }
 });
});

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.420896628380883) && y < (h*.787699147832531) ){
   // if we are show keyboardTips
   $("#gallery_menu_right").fadeIn("fast");
  } else {
   $('#gallery_menu_right').fadeOut('fast');
  }
 });
});

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.787699147832531) && y <= (h*1.0) ){
   // if we are show keyboardTips
   $("#contact_menu_left").fadeIn("fast");
  } else {
   $('#contact_menu_left').fadeOut('fast');
  }
 });
});

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #centeredcontent
  var h = $('#centeredcontent').height();
  var y = $(window).scrollTop();
  if( y > (h*.787699147832531) && y <= (h*1.0) ){
   // if we are show keyboardTips
   $("#contact_menu_right").fadeIn("fast");
  } else {
   $('#contact_menu_right').fadeOut('fast');
  }
 });
});

Answer 1

在不知道相关尺寸的情况下我无法确定，但问题可能是 scrollTop 总是小于高度，因为它从不包括该部分的可见部分。您可能永远不会在最后两个事件处理程序中达到条件。

一条不相关的建议是将所有事件处理程序组合成一个具有多个 if-else 子句的事件处理程序。它将更高效，更易于阅读和维护。