ScrollTop - mit Klassen

Hallo zusammen,

ich suche eine Art Fade-In/Fade-Aus -Variante mit welcher ich 200px über einem DIV und 200px drunter das DIV ein- und ausblenden kann.

Folgenden Code habe ich bisher zusammen(leider reichen meine Kenntnisse dafür nicht weiter aus):





<script type="text/javascript">

/* <![CDATA[ */

var bla = document.getElementById('foo');



window.onscroll = function() {

bla.style.display = ((window.pageYOffset || document.documentElement.scrollTop) > 200) ? 'block' : 'block';

};

/* ]]> */

</script>





Problem, es funktioniert bisher nur für IDs. Ich brauche diesen Effekt jedoch ca. vier bis fünf mal auf der Website, sprich mit einer Klasse.

Also habe ich probiert "document.getElementById" durch "document.getElementsByClassName" zu ersetzten, in der Hoffnung das dadurch die Klasse angesprochen wird, leider ohne Erfolg :(

Das nächste Problem ist, dass ich leider kein Gegenstück zu scollTop finde (scrollBottom etc. funktioniert alles nicht), mit dem ich 'block' wieder zu 'block' stellen kann.



Wenn jemand dazu eine Idee hat wäre dies super :)



Danke!

ScrollTop - mit Klassen