根據滾動位置交換div元素

Question

當滾動位置在x和y（占總百分比）之間時，我有一些jq在div中逐漸消失。 我想做的是在滾動位置在1000px和2000px之間時在一對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）應出現。 每一組在屏幕頂部都有一個固定位置，當您滾動付費時，它們只是被換成另一組。 這就是我所擁有的，前2套有效，但最后一套卻沒有。 如果有人能幫助我指出我要去哪里的正確方向，那就太好了。 這個腳本是我在某個地方發現的一個腳本的6倍，據我所知這是我的問題，抱歉，我對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子句的單個事件處理程序中。 它將更加高效，並且易於閱讀和維護。