Add sticky navigation

This commit is contained in:
Unknown 2018-09-03 14:38:18 +02:00
parent 47cb55930d
commit 2972e455f3
2 changed files with 19 additions and 14 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,15 +1,18 @@
<template>
<nav class="module-navigation">
<h3 class="module-navigation__heading">Inhalte: Modul 1</h3>
<div class="module-navigation__anchors">
<a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
<a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
<a href="#" class="module-navigation__anchor">1.1 Lehrbeginn</a>
<a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a>
<a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
</div>
<h3 class="module-navigation__heading">Ergebnisse: Modul 1</h3>
</nav>
<div>
<nav class="module-navigation">
<h3 class="module-navigation__heading">Inhalte: Modul 1</h3>
<div class="module-navigation__anchors">
<a href="#" class="module-navigation__anchor module-navigation__anchor--active">Einleitung</a>
<a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
<a href="#" class="module-navigation__anchor">1.1 Lehrbeginn</a>
<a href="#" class="module-navigation__anchor">1.2 Die drei Lernorte</a>
<a href="#" class="module-navigation__anchor">Lernzielkontrolle</a>
</div>
<h3 class="module-navigation__heading">Ergebnisse: Modul 1</h3>
</nav>
</div>
</template>
<style scoped lang="scss">
@ -22,6 +25,10 @@
}
.module-navigation {
position: -webkit-sticky;
position: sticky;
top: 32px;
&__heading {
@include module-navigation-typography;
margin: 0;