ScrollTop - mit Klassen

[Xeus]

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!

 

[mikdoe]

Was ist denn Auslöser für die Aktion? Du hast jetzt onscroll verwendet. Das heißt, bei jedem kleinsten Scrollen sollen diese mehrfachen div's herum klappen? Und was soll Auslöser sein, dass sie wieder zurück klappen in Ausgangsstellung?

 

[Xeus]

Beispiel:
Es gibt fünf News auf einem Blog. Immer wenn man 200px vor einer News ist, soll sich Beispielsweise die Linie über der News-Headline von weiß auf orange einfärben. Sobald man 200px unter der News ist, soll sie zur Ausgangsstellung (also weiße Linie) wieder zurückspringen. Also habe ich zwei Klassen erstellt und eine von beiden auf "display: none;" gestellt.

Mir fällt da gerade auch auf, dass es heißen sollte:

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

Wenn mann zur nächsten News runterscrollt soll der selbe Effekt passieren. Es soll immer nur eine News angesprochen werden.

Hoffe das ist in irgendeiner Weise verständlich

Danke!

 

[mikdoe]

wenn man 200px vor einer News ist, soll sich Beispielsweise die Linie über der News-Headline von weiß auf orange einfärben

OK

Sobald man 200px unter der News ist, soll sie zur Ausgangsstellung (also weiße Linie) wieder zurückspringen

In dieser Schilderung fehlt die Beschreibung zum Hinspringen.

Hoffe das ist in irgendeiner Weise verständlich

Soweit es mich betrifft ist es nach wie vor nicht verständlich.

 

[Xeus]

Neuer Versuch

Ein Blog, welcher auf jeder Seite fünf Einträge hat. Zum Beginn jedes Eintrags, befindet sich eine Klasse namens "info", welche als Hintergrund eine weiße Linie hat.
Ausgangsstellung ist, jede der fünf Einträge hat zu Beginn (beim Aufruf der Seite) eine weiße Linie über der Headline.
Fängt man an zu scrollen und der Abstand zwischen Adressleiste und "info" beträgt einen Abstand von ca. 200px so soll die weiße Linie orange werden.
Dafür habe ich eine weitere Klasse namens "foo" angelegt, welche auf display: none; steht und als Hintergrund eine orange Linie hat.
Sprich die Klasse "info" müsste bei dem 200px-Abstand auf display: none; gestellt werde und foo auf display: block;.
Oder halt die Klasse "foo" liegt einfach nur auf der "info" drüber, so dass sich die oragen Linie im Vordergrund befindet.
Beim weiter scrollen soll dementsprechen 200px nach der Klasse bzw. der Headline, das Gegenteil passieren. Die orange Linie wird wieder weiß ("foo"-Klasse bekommt wieder display:none.

Hoffe das ist verständlicher

Danke!

 

[mikdoe]

Kannst du daraus mal ein abgespecktes Fiddle machen, bitte.

 

[rico2009]

Zuerst einmal, "document.getElementsByClassName" wird funktionieren, wie hast du es denn eingesetzt? Man muss hierbei nämlich beachten, dass es ein Array-Objekt zurück gibt und deswegen per document.getElementsByClassName[X] angesprochen werden muss.

Ich denke ich habe verstanden was du willst und möchte dich mal auf JQuery aufmerksam machen. Damit ist es viel einfacher solche Effekte zu bauen. Schau dir mal folgende Funktionen an:
.slideDown() | jQuery API Documentation
.slideUp() | jQuery API Documentation

Mit .next() | jQuery API Documentation kannst du jeweils das nächste Element ansprechen und musst nicht umständlich mit Ids arbeiten. Jenachdem was dir lieber ist, kann ich dir dann noch die Funktionen .scroll() | jQuery API Documentation bzw. .scrollTop() | jQuery API Documentation nennen. Ich hoffe damit kommst du schon mal ein Stückchen weiter.