Question

当滚动位置在x和y之间时（占总数的百分比），我有一些淡入div的jq。当滚动位置在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）时应该出现。每组都有一个固定的位置在屏幕的顶部，当你滚动付费只是交换另一个。这就是我所拥有的，前两套有效，但最后付出的却没有。如果有人能帮我指出正确的方向，那就是我错了。这个脚本只有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子句的事件处理程序中。它将更有效，更易于阅读和维护。

根据滚动位置交换div元素

1 个答案: