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

js/index.js

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

styles/components/_topbar.scss

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

templates/components/sticky_cta.html

@@ -1,5 +1,5 @@
 {% 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-text">
                 <h3>{{ text }}</h3>

templates/navigation/topbar.html

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