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
Post a Comment