ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/modules/Module.vue
View File

File diff suppressed because one or more lines are too long

29
client/src/components/modules/ModuleNavigation.vue
View File

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