• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Das selbe script zweimal.

D

Dropout2

New member
Hallo an alle,
mal wieder eine Frage an euch, da ich einfach nicht weiterkomme.
Ich möchte kein jquery benutzen, sondern reines altes javascript.

Mein script:
Code: 
myID = document.getElementById("id");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 160) {
        myID.className = "id an"
    } else {
        myID.className = "id aus"
    }
};

window.addEventListener("scroll", myScrollFunc);

Vorweg, der code funktioniert. Ich blende damit beim abwärtsscrollen ein div ein und wenn ganz nach oben gescrollt wird den selben div wieder aus.
So weit so gut. Es funktioniert aber nur mit einem div. Also dachte ich, kopiere den code und andere id bzw. klassen rein, andere Zahl bei if(y und schon kann ich das nächste div ein bzw. ausblenden. Aber mal wieder weit gefehlt. Funzt nicht. Irgendwie wird der erste code vom nächsten überschrieben. Hat jemand eine Lösung parat, bei der ich mehrere div bei unterschiedlicher Scrollhöhe ein und ausblenden lassen kann?

Gruß Frank
 
Dropout2 schrieb:
Irgendwie wird der erste code vom nächsten überschrieben.
Zum Vergrößern anklicken....
Nicht der Code, sondern deine globale (bäh) Variable.

Außerdem ist Codeverdoppelung niemals eine gute Idee. Mach' eine Funktion, die das DIV und die Position als Parameter aufnimmt und mach' die Logik nur einmal:
Code: 
var setScrollToggle = (function(){
	var elements = [];
	window.addEventListener("scroll", function(){
		var y = window.scrollY;
		elements.forEach(function(element){
			element.element.className = y >= element.position? element.classOn: element.classOff;
		});
	});
	return function setScrollToggle(element, position, classOn, classOff){
		elements.push({
			element: element,
			position: position,
			classOn: classOn || "classOn",
			classOff: classOff || "classOff"
		});
	}
}());

setScrollToggle(document.getElementById("id"), 160, "id an", "id aus");
- ungetestet.
 
Hallo, bin zurück aus dem Urlaub. Also wie versprochen hier meine Antwort. Erst mal danke für deine Mühe. Habe deinen code ausprobiert. Hat nicht funktioniert. Habe mich deshalb weiter umgeschaut und ausprobiert und bin zu folgendem Ergebnis gekommen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
  window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
        document.getElementById("look").className = "classOn";
    } else {
        document.getElementById("look").className = "classOff";
    }
    if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
        document.getElementById("look2").className = "classOn";
    } else {
        document.getElementById("look2").className = "classOff";
    }
}
  </script>
  <style>
  #look {
  position: fixed;
  top: 20px;
  left: 20px;
  background: #cdcdcd;
  width: 200px;
  height: 200px;
  }
  
  #look2 {
  position: fixed;
  top: 20px;
  left: 400px;
  background: #ff4040;
  width: 200px;
  height: 200px;
  }
  
  .classOff {
  opacity: 0;
  -webkit-transition: all 0.5s ease; /* Firefox */
  -moz-transition: all 0.5s ease; /* WebKit */
  -o-transition: all 0.5s ease; /* Opera */
  transition: all 0.5s ease; /* Standard */
  }
  
  .classOn {
  opacity: 1;
  -webkit-transition: all 0.5s ease; /* Firefox */
  -moz-transition: all 0.5s ease; /* WebKit */
  -o-transition: all 0.5s ease; /* Opera */
  transition: all 0.5s ease; /* Standard */
  }
  </style>
  </head>
  <body>
  <div id="look" class="classOff"></div>
  <div id="look2" class="classOff"></div>
  <div style="height: 4000px;"></div>
  </body>
</html>

Ob das ganze valide ist, weiß ich nicht. Aber es funktioniert.

Gruß Frank
 
Guten Morgen,

ja, es funktioniert - aber leider ist es noch nicht spitze! Denn wenn ich bei bspw. Scrolltiefe 900 bin, greifst Du weiterhin ins DOM und setzt das Attribut className - und zwar 2x -, obwohl längst gesetzt und nicht mehr notwendig. So allein betrachtet ist das egal - mit zig anderen Funktionen zu Client-Lasten (bspw. "fat client") wird das schnell was in puncto Performance-Einbuße. Von daher würde ich Dein onscroll() "nach Bedarf" umschreiben - also zwei "Flags" bereitstellen, die unnötige DOM-Abfragen direkt vermeiden (wenn gesetzt). Flags (true/false, 0/1 ... whatever) würden gesetzt und Teil der if-Abfrage werden. Damit steigen die nicht mehr unnötig da ein. Ob die 20 Zeichen Source dann zwingend notwendig sind, kann ich von hier nicht beurteilen.

Die Distanzabfrage würde ich als "var" direkt nach der Funktionsdeklaration (innerhalb) platzieren und damit nur 1x durchführen.

Jaaaa, zugegeben - bevor wer schimpft -, das ist jetzt wirklich Kleinkram und nicht einmal nennenswert. Aber wer weiß, wieviel tausend Zeilen JS da noch hinter versteckt sind. Heißt: Wenn man also gleich mit eiserner Disziplin werkelt, hat man bei wachsendem Projekt später null Schwierigkeiten - weder mit Wartung, noch mit Erweiterung (oder Umbau).

Starken Freitag euch allen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben