javascript - Swap div Elements Depending on the Scroll Position -


i have jq fades in div when scroll position between x , y (percentage of total). trying fade in pair of divs (about_me_menu_left , about_me_menu_right) when scroll position between 1000px , 2000px. when scrolled passed 2000px 3000px divs should change (gallery_menu_left , gallery_menu_right) , when scrolling between 3000px , bottom of site divs (contact_menu_left , contact_menu_right) should appear. each set of have fixed position @ top of screen , scroll on paid swapped another. have , first 2 sets work last paid not. if can point me in right direction on going wrong great. script 6x 1 found somewhere 1 after other far know problem, sorry new javascript.

javascript:

    $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.210448314190441) && y < (h*.420896628380882) ){    // if show keyboardtips    $("#about_me_menu_left").fadein("fast");   } else {    $('#about_me_menu_left').fadeout('fast');   }  }); });  $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.210448314190441) && y < (h*.420896628380882) ){    // if show keyboardtips    $("#about_me_menu_right").fadein("fast");   } else {    $('#about_me_menu_right').fadeout('fast');   }  }); });  $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.420896628380883) && y < (h*.787699147832531) ){    // if show keyboardtips    $("#gallery_menu_left").fadein("fast");   } else {    $('#gallery_menu_left').fadeout('fast');   }  }); });  $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.420896628380883) && y < (h*.787699147832531) ){    // if show keyboardtips    $("#gallery_menu_right").fadein("fast");   } else {    $('#gallery_menu_right').fadeout('fast');   }  }); });  $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.787699147832531) && y <= (h*1.0) ){    // if show keyboardtips    $("#contact_menu_left").fadein("fast");   } else {    $('#contact_menu_left').fadeout('fast');   }  }); });  $(document).ready(function(){  $(window).scroll(function(){   // height of #centeredcontent   var h = $('#centeredcontent').height();   var y = $(window).scrolltop();   if( y > (h*.787699147832531) && y <= (h*1.0) ){    // if show keyboardtips    $("#contact_menu_right").fadein("fast");   } else {    $('#contact_menu_right').fadeout('fast');   }  }); }); 

i can't without knowing relevant sizes, problem scrolltop smaller height because never includes visible part of section. you're never reaching condition in last 2 event handlers.

an unrelated piece of advice combine of event handlers single event handler multiple if-else clauses. both more efficient , easier read , maintain.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -