pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make topbar sticky and set sticky cta header so it sticks below topbar

Browse Source
This commit is contained in:
leigh-mil 2019-08-29 17:03:55 -04:00
parent 2b11debe5d
commit 6669608038
4 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/index.js
View File

@ -130,8 +130,12 @@ const app = new Vue({
directives: { directives: {
sticky: { sticky: {
inserted: el => { inserted: (el, binding) => {
stickybits(el) var customAttributes
if (binding.expression) {
customAttributes = JSON.parse(binding.expression)
}
stickybits(el, customAttributes)
}, },
}, },
}, },

6
styles/components/_topbar.scss
View File

@ -1,6 +1,12 @@
.topbar { .topbar {
background-color: $color-blue-darkest; background-color: $color-blue-darkest;
border-bottom: 1px solid $color-black; border-bottom: 1px solid $color-black;
z-index: 16;
height: 48px;
&.js-is-sticky {
width: 100%;
}
&__navigation { &__navigation {
display: flex; display: flex;

2
templates/components/sticky_cta.html
View File

@ -1,5 +1,5 @@
{% macro StickyCTA(text) -%} {% macro StickyCTA(text) -%}
<div class="sticky-cta" v-sticky="{ stickyTop: 2 }"> <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 48 }'>
<div class="sticky-cta-container"> <div class="sticky-cta-container">
<div class="sticky-cta-text"> <div class="sticky-cta-text">
<h3>{{ text }}</h3> <h3>{{ text }}</h3>

2
templates/navigation/topbar.html
View File

@ -1,6 +1,6 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
<header class="topbar"> <header class="topbar" v-sticky>
<nav class="topbar__navigation"> <nav class="topbar__navigation">
<a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home"> <a href="{{ url_for('atst.home') }}" class="topbar__link topbar__link--home">
{{ Icon('shield', classes='topbar__link-icon') }} {{ Icon('shield', classes='topbar__link-icon') }}