diff --git a/js/index.js b/js/index.js
index 5ea9ed13..5bb1a924 100644
--- a/js/index.js
+++ b/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)
       },
     },
   },
diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss
index a69ea78b..d2bff318 100644
--- a/styles/components/_topbar.scss
+++ b/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;
diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html
index b4c37d5a..d47e29cb 100644
--- a/templates/components/sticky_cta.html
+++ b/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>
diff --git a/templates/navigation/topbar.html b/templates/navigation/topbar.html
index 0defde8a..4f44780c 100644
--- a/templates/navigation/topbar.html
+++ b/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') }}