Su. Hilfe für Script

[MrPaule75]

Su. Hilfe für Script (erledigt)

Hallo,

es ist zwar schön selber zu einem Ergebnis zu kommen, ich möchte dieses Projekt aber nun endlich abschließen und mir fehlen noch 3 Optinierungen.
Bin selber kein Programmierer (nur Scriptstückler) und benötige honorierte Unterstützung zur Fertigstellung.

JScript:

<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 5000 || document.documentElement.scrollTop > > 5000) {
      document.getElementById("s5").className = "bulletlist active";
      document.getElementById("s4").className = "bulletlist";
      document.getElementById("s3").className = "bulletlist";
} else if (document.body.scrollTop > 4000 || document.documentElement.scrollTop > 4000){
      document.getElementById("s4").className = "bulletlist active";
      document.getElementById("s5").className = "bulletlist";
      document.getElementById("s3").className = "bulletlist";
} else if (document.body.scrollTop > 3000 || document.documentElement.scrollTop > 3000) {
      document.getElementById("s3").className = "bulletlist active";
      document.getElementById("s2").className = "bulletlist";
      document.getElementById("s4").className = "bulletlist";
} else if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
      document.getElementById("s2").className = "bulletlist active";
      document.getElementById("s1").className = "bulletlist";
      document.getElementById("s3").className = "bulletlist";
} else if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
      document.getElementById("s1").className = "bulletlist active";
      document.getElementById("s0").className = "bulletlist";
      document.getElementById("s2").className = "bulletlist";
} else {
      document.getElementById("s0").className = "bulletlist active";
      document.getElementById("s1").className = "bulletlist";
      document.getElementById("s2").className = "bulletlist";
      document.getElementById("s3").className = "bulletlist";
      document.getElementById("s4").className = "bulletlist";
      document.getElementById("s5").className = "bulletlist";
}
}
</script>

HTML-Code:

<div class="sprungmarken displayhoehe">
<ul class="sprungmarken">
<li id="s0"><a href="#top" title="nach oben" class="bulletlist"></a></li>
<li id="s1"><a href="#zwei" title="weiter" class="bulletlist"></a></li>
<li id="s2"><a href="#drei" title="weiter" class="bulletlist"></a></li>
<li id="s3"><a href="#vier" title="weiter" class="bulletlist"></a></li>
<li id="s4"><a href="#fuenf" title="weiter" class="bulletlist"></a></li>
</ul>
</div>

Erklärung:
Der HTML-Code zeigt die Sprungmarken am Seitenrand. Über diese kann man direkt (runter) zu den "Seitenabschnitten" springen.
Bei dem jeweiligen Seitenbereich soll der jeweilige Seitenpunkt aktiv sein.

Problem / Hilfe benötigt:

1. Die Deaktivierung der einzelnen Seitenpunkte

document.getElementById("s5").className = "bulletlist";

mit x eigenen Zeilen ist sicherlich nicht elegant gelöst - denke ich. Ein(e) Profi kann das sicherlich kürzer/eleganter lösen. Wenn nicht oder zu aufwändig, funktioniert auch so.

2. Die "Seitenhöhe" der Bereiche ist derzeit noch in Pixen angegeben. Das hat den Nachteil, zieht man das Browserfenster in der Höhe schmaler oder hat das Display eine kleinere/größere Größe in Pixeln, stimmen die aktivierten Seitenpunkte nicht. Ideal wäre hier die Verwendung der 'windowHeight'.
Ich nutze davor zur Bestimmung der Displayhöhe (wegen der automatischen Anpassung von Bildern auf die ganze Displahöhe) folgenes Script.

<script>
$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.displayhoehe').css('height', windowHeight);
  };
  setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});
</script>

Ich weiß jedoch nicht auf Anhieb, wie ich die 'windowHeigt' in das andere Script rüberbekommen und einbinde, dass es dann so funktioniert:

if (document.body.scrollTop > ($(window).innerHeight()*5) || document.documentElement.scrollTop > ($(window).innerHeight()*5))

... also anstatt einer fixen Pixelhöhe die z.B. fünf, vier, drei ... fache Displayhöhe.

3.) Aktuell ist es so, wenn man die Seite lädt, der erste Punkt (Seite1 bzw. s0) deaktiviert ist. Erst nach dem ersten Scrollen per Wheel oder Scrollbalken aktiviert sich der Punkt. Ich glaube das hängt mit dem Script zusammen, welches nur Scollaktionen erfasst. Schöner wäre es jedoch, dass beim Seite laden der Punkt schon aktiviert wird, dann beim Scrollen weiter aktiv bleibt, bis man dann in den nächsten Bereich gelangt.

Bei Fragen bitte fragen.

Ich benötige jemand, der/die mir das zeitnah umsetzen kann. Sollte für eine/n Javaprogrammierer/in kein Problem sein.
Bitte Zeitaufwand und Honorarvorstellung angeben (auch ob inkl. oder exkl. MwSt.)

Vielen Dank im Voraus.

 

[MrPaule75]

erledigt

 

[mikdoe]

Wie denn?