CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tarquinton
Tarquinton

Reputation: 1

Swap div Elements Depending on the Scroll Position

I have some jq that fades in a div when the scroll position is between x and y (percentage of total). What I am trying to do is fade in a pair of divs (about_me_menu_left and about_me_menu_right) when the scroll position is between 1000px and 2000px. Then when scrolled passed 2000px to 3000px the divs should change to (gallery_menu_left and gallery_menu_right) and finally when scrolling between 3000px and the bottom of the site divs (contact_menu_left and contact_menu_right) should appear. Each set of have a fixed position at the top of the screen and as you scroll on paid is just swapped for another. This is what I have and the first 2 sets work but the last paid does not. If anyone can help point me in the right direction on where I am going wrong that would be great. This script is just 6x one I found somewhere that just one after the other which as far as I know is my problem, sorry I am very new to 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');
  }
 });
});

Upvotes: 0

Views: 445

Answers (1)

WyngoMasala
WyngoMasala

Reputation: 36

I can't be certain without knowing the relevant sizes, but the problem is probably that scrollTop is always smaller than height because it never includes the visible part of the section. You're probably never reaching the condition in your last two event handlers.

An unrelated piece of advice is to combine all of your event handlers into a single event handler with multiple if-else clauses. It will be both more efficient and easier to read and maintain.

Upvotes: 1

Related Questions