Navigations one pager

[kazaam00nix]

Hallo liebe freunde,

ich habe heute erneut eine frage.

Ich arbeite zurzeit an einem One-Pager (mein erster in contao). Nun möchte ich die Navigation richtig einstellen, sodass wenn die Seite runtergescrollt ist bis zu einer bestimmten "section", die navigation dies durch einen balken oben anzeigt welche Seite man sich gerade anschaut. Zurzeit habe ich den Balken lediglich nur als "hover" effekt vorhanden, möchte es aber durchgehend da haben wenn man in der bestimmten section der seite ist.

Die webseite: http://optismall.mnb-crossmediadesign.de

Wäre über jede Hilfe dankbar

Hab versucht über die suchfunktion was zu finden aber nicht wirklich explizit hierzu was gefunden, vielleicht gebe ich auch die falschen stichpunkte ein....

[andre.saage]

Da brauchst du wohl sowas hier: https://blackrockdigital.github.io/s...scrolling-nav/

Ich persönlich tue mich mit diesen Onepagern auch immer schwer was die Navigation betrifft - falls jemand eine schöne Lösung kennt, die auch den Browser-Zurück-Button nicht im Stich lässt - immer her damit.

[Andreas]

Wenn dir das beim Draufklicken ausreicht, brauchst nur einen Click-Event auf die Links zu setzen und dann dem aktiven z.B. die Klasse 'active' geben.

/* Vanilla JS */
var myNavLinks = document.querySelectorAll('#myNavbar a');

for(i = 0; i < myNavLinks.length; i++) {
  myNavLinks[i].addEventListener('click', function() {
    for(i = 0; i < myNavLinks.length; i++) {
      myNavLinks[i].classList.remove('active');
    }
    this.classList.add('active');
  });
} 

Anpassen während man scrollt ist aufwendiger zu programmieren, da würde ich evtl. auch eine Klasse nehmen, wie oben erwähnt, oder die ScrollSpy aus Bootstrap http://getbootstrap.com/javascript/#scrollspy, oder, oder

[folkfreund]

Zum Thema One-pager und Navigation gibt es hier im Forum etliche Beiträge, z.B.
https://community.contao.org/de/show...age+navigation

Damit man Unterseiten in einer OPW auch direkt über lesbare Anker anspringen kann, ist dieser Thread hilfreich:
https://community.contao.org/de/show...light=one+page

Außerdem fördert die Suche nach 'Smooth scroll' einige nützliche Informationen zutage, die in dem Zusammenhang weiterhelfen.

Viel Erfolg!