Make filter bar sticky

This commit is contained in:
Ramon Wenger 2018-10-17 16:44:42 +02:00
parent 387a403565
commit 6212e6bb94
3 changed files with 11 additions and 2 deletions

View File

@ -60,6 +60,12 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.filter-bar { .filter-bar {
position: sticky;
top: -1px;
margin-top: -25px;
z-index: 9;
padding: 0px 24px; padding: 0px 24px;
height: 50px; height: 50px;
background-color: $color-lightgrey; background-color: $color-lightgrey;

View File

@ -87,7 +87,7 @@
.module-navigation { .module-navigation {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 32px; top: 75px;
&__module-content { &__module-content {
margin-bottom: 18px; margin-bottom: 18px;

View File

@ -4,8 +4,11 @@
<top-navigation></top-navigation> <top-navigation></top-navigation>
<router-link to="/" class="skillbox__header-logo">skillbox</router-link> <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
<user-widget v-bind="me"></user-widget> <user-widget v-bind="me"></user-widget>
<filter-bar v-if="showFilter"></filter-bar>
</header> </header>
<filter-bar v-if="showFilter"></filter-bar>
<router-view></router-view> <router-view></router-view>
<footer class="skillbox__footer">Footer</footer> <footer class="skillbox__footer">Footer</footer>
</div> </div>