Geek Answers Handbook

JQuery elements disappear when they scroll, disappear when they scroll back

I want the elements to disappear when they scroll at the top of the page, and then disappear when they scroll back to the page. I have written code that works, but I am looking for a more elegant solution. Here is the solution I'm working on jsfiddle: http://jsfiddle.net/wmmead/JdbhV/3/

I would like to find a much shorter, more elegant piece of code, but just can't completely solve it. Maybe something with an array and each () method? If I put the class on divs instead of ID, it gets much shorter, but then they all disappear right away. I want each box to disappear when it scrolls from the page.

HTML

<div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> <div id="box6"></div>

CSS

 #box1, #box2, #box3, #box4, #box5, #box6 { width: 100px; height: 100px; background: orange; margin:100px auto; } #box6 { margin-bottom:600px; }

JQuery

 var box1Top = $('#box1').offset().top; var box2Top = $('#box2').offset().top; var box3Top = $('#box3').offset().top; var box4Top = $('#box4').offset().top; var box5Top = $('#box5').offset().top; var box6Top = $('#box6').offset().top; $(window).scroll(function () { if ((box1Top - $(window).scrollTop()) < 20) { $('#box1').stop().fadeTo(100, 0); } else { $('#box1').stop().fadeTo('fast', 1); } if ((box2Top - $(window).scrollTop()) < 20) { $('#box2').stop().fadeTo(100, 0); } else { $('#box2').stop().fadeTo('fast', 1); } if ((box3Top - $(window).scrollTop()) < 20) { $('#box3').stop().fadeTo(100, 0); } else { $('#box3').stop().fadeTo('fast', 1); } if ((box4Top - $(window).scrollTop()) < 20) { $('#box4').stop().fadeTo(100, 0); } else { $('#box4').stop().fadeTo('fast', 1); } if ((box5Top - $(window).scrollTop()) < 20) { $('#box5').stop().fadeTo(100, 0); } else { $('#box5').stop().fadeTo('fast', 1); } if ((box6Top - $(window).scrollTop()) < 20) { $('#box6').stop().fadeTo(100, 0); } else { $('#box6').stop().fadeTo('fast', 1); } });
+7
source share
3 answers

You can use the attribute selector '[attr="someattr"]' using the .each() method for jQuery:

 $(window).scroll(function () { $('[id^="box"]').each(function () { // <---loop the divs id starts with #box if (($(this).offset().top - $(window).scrollTop()) < 20) { //<---mark the $(this).offset().top of current object $(this).stop().fadeTo(100, 0); //<----fadeOut the current obj } else { $(this).stop().fadeTo('fast', 1); //<----fadeIn the current obj } }); });

Here you can take a demo:

Demo

+8
source

This version of your jsfiddle is considered better for several reasons :

  • Well functionally decomposed (it is divided into small functions): higher readability for you and other coders, and easier to maintain in the future if you need to change something.
  • Flexibility: you can change the number of boxes without even knowing javascript!
  • Efficiency: due to functional decomposition, this means that each line of code is only called if 100% is required

Besides javascript, I added classes in addition to existing identifiers. for example: id="box1" class="box"

enjoy :)

+1
source

Well, I think, just set a class for all your divs. Instead of calling each one with C # id

0
source

More articles:


All Articles