javascript - How to fade in/out div when scrolling past certain points on a page? -

how fade/in out divs ontop of each other, when user scrolls point in page? have fixed button want change when user reaches 6 different points on page. in other words can link 6 different things same button @ different points in page 1000px top, 2000px , on.

each of buttons have different words in them want each button fade in after next when correct number of px reached when scrolling.

html

<div class="buttonone">button one</div> <div class="buttontwo">button two</div> <div class="buttonthree">button three</div>

css

.buttonone, .buttontwo, .buttonthree { position: fixed; margin-top: 3em; }

all positioned fixed , on top of each other. each 1 should fade in @ 100px, 200px, 300px , on?

use jquery:

$(window).scroll(function(){ if($(window).scrolltop() === 10){    $('.element').fadeout(); } }); 

fiddle: http://jsfiddle.net/hive7/vv7wd/2/

to add more use:

if ($(window).scrolltop() >= "number of pixels") {         if ($('"button plus number"').css('display') === 'none') {             $('"button plus number"').fadein('slow');             $('"button plus number"').prev().fadeout();             $('"button plus number"').next().fadeout();         }     } 

elements in double quotes set

example (for number 4):

if ($(window).scrolltop() >= 400) {             if ($('button4').css('display') === 'none') {                 $('button4').fadein('slow');                 $('button4').prev().fadeout();                 $('button4').next().fadeout();             }         } 

or use loop:

$(window).scroll(function () {     (i = 0; <= 20; i++) {         if ($(window).scrolltop() >= (i * 100)) {             if ($(window).scrolltop() <= ((i * 100) + 100)) {                 $('.button' + i).fadein('slow');                 $('.button' + i).prev().fadeout();                 $('.button' + i).next().fadeout();             }         }     } }); 

the loop better means have implement 1 thing everytime add 1 condition in loop