Eine Demo mit der One-Page-Navigation findest du hier.
Installiere die Erweiterung Onepage Navigation von Erdmann & Freunde über den Contao Manager und aktualisiere die Datenbank.
Lege ein Modul vom Typ Artikelnavigation (Onepage) an und wähle unter Modul-Template das Template mod_onepage_navigation_nature aus.
Lege ein neues Layout an bzw. dupliziere ein vorhandes Layout und wähle unter den Eingebundenen Modulen das eben angelegte Modul aus.
Damit die Navigation oben am Bildschirmrand stehen bleibt sobald man herunterscrollt, füge bitte noch folgende Codeschnipsel unter Eigener JavaScript-Code und Zusätzliche head-Tags ein. Du kannst das natürlich auch in eigene Dateien auslagern und die Dateien im Layout einbinden.
<script>
jQuery(document).ready(function($) {
stuckNavbar();
$(window).scroll(function () {
stuckNavbar();
});
function stuckNavbar() {
var scrollPos = $(window).scrollTop();
if (scrollPos > 0) {
$('.mod_navigation.navbar').addClass('stuck');
} else {
$('.mod_navigation.navbar').removeClass('stuck');
}
}
});
</script>
<style>
.mod_navigation.navbar {
position: fixed;
transition: all .3s;
&.stuck {
height: 70px;
.navbar-brand img {
max-height: 40px;
}
.navbar-start {
padding: 0 70px;
}
}
}
</style>
Das angelegte Layout muss noch der Seite bzw. dem Seiten-Startpunkt zugewiesen werden.
Für jeden Menüpunkt wird ein Artikel angelegt. In den Artikeleinstellungen kann unter One-Page-Navigation die Checkbox Als Navigationspunkt hinzufügen aktiviert werden.