Improve scroll behaviour (#145)

* Improve scroll behaviour with sticky nav

* Use sticky element from Mavis

Author: edwardhorsford

app/assets/javascript/custom-elements/is-sticky.js

@@ -0,0 +1,47 @@
+// app/assets/javascript/custom-elements/is-sticky.js
+
+// Copied from https://github.com/nhsuk/manage-vaccinations-in-schools-prototype/blob/main/app/assets/javascripts/custom-elements/is-sticky.js
+
+const IsStickyComponent = class extends HTMLElement {
+  constructor() {
+    super()
+    this.stickyElementStyle = null
+    this.stickyElementTop = 0
+
+    this.determineStickyState = this.determineStickyState.bind(this)
+    this.throttledStickyState = this.throttle(this.determineStickyState, 100)
+  }
+
+  connectedCallback() {
+    this.stickyElementStyle = window.getComputedStyle(this)
+    this.stickyElementTop = parseInt(this.stickyElementStyle.top, 10)
+
+    window.addEventListener('scroll', this.throttledStickyState)
+
+    this.determineStickyState()
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('scroll', this.throttledStickyState)
+  }
+
+  determineStickyState() {
+    const currentTop = this.getBoundingClientRect().top
+    this.dataset.stuck = String(currentTop <= this.stickyElementTop)
+  }
+
+  throttle(callback, limit) {
+    let inThrottle
+    return function () {
+      const args = arguments
+      const context = this
+      if (!inThrottle) {
+        callback.apply(context, args)
+        inThrottle = true
+        setTimeout(() => (inThrottle = false), limit)
+      }
+    }
+  }
+}
+
+customElements.define('is-sticky', IsStickyComponent)

app/assets/sass/components/_status-bar.scss

@@ -44,4 +44,45 @@
 .app-status-bar__key {
   @include nhsuk-typography-weight-bold($important: true);
   opacity: 0.9;
+}
+
+is-sticky {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+// Sass variables for header height calculations
+$nav-height: 48px;
+$status-bar-base-padding: 16px; // 8px top + 8px bottom
+$status-bar-row-height: 32px; // Approximate row height
+$status-bar-row-spacing: 16px; // 8px margin + 8px padding for borders
+
+// Function to calculate header height for given number of rows
+@function calculate-header-height($rows) {
+  $spacing-multiplier: $rows - 1; // Number of border spacings needed
+  @if $spacing-multiplier < 0 {
+    $spacing-multiplier: 0;
+  }
+  @return $nav-height + $status-bar-base-padding + ($rows * $status-bar-row-height) + ($spacing-multiplier * $status-bar-row-spacing);
+}
+
+// Default scroll padding (fallback for 3 rows)
+html {
+  scroll-padding-top: #{calculate-header-height(3)};
+}
+
+// Generate classes for different row counts
+@for $rowCount from 1 through 5 {
+  html:has(.app-status-bar--rows-#{$rowCount}) {
+    scroll-padding-top: #{calculate-header-height($rowCount)};
+  }
+}
+
+// Alternative approach if :has() doesn't work - classes on html element
+@for $rowCount from 1 through 5 {
+  html.sticky-header-rows-#{$rowCount} {
+    scroll-padding-top: #{calculate-header-height($rowCount)};
+  }
 }

app/views/_components/status-bar/template.njk

@@ -1,6 +1,9 @@
 {# app/views/_components/status-bar/template.njk #}
 
-<div class="app-status-bar">
+{# Output a class counting the number of rows so that we can work out how tall the sticky nav is #}
+{% set classes = params.classes + (" app-status-bar--rows-" + params.rows | length) %}
+
+<div class="app-status-bar {{ classes }}">
   <div class="nhsuk-width-container">
     {% for row in params.rows %}
       <div class="app-status-bar__row">

app/views/_includes/appointment-header.njk

@@ -1,9 +1,9 @@
 {# app/views/_includes/event-active-header.njk #}
 
-<div class="app-appointment-header app-appointment-header--sticky" data-stuck="true">
+<is-sticky class="app-appointment-header app-appointment-header--sticky">
   {% include "_includes/appointment-status-bar.njk" %}
 
   <div class="nhsuk-width-container">
     {% include "_includes/event-active-tabs.njk" %}
   </div>
-</div>
+</is-sticky>

app/views/_includes/scripts.html

@@ -1,9 +1,11 @@
 <script src="/js/jquery-3.5.1.min.js" type="module"></script>
+<script src="/js/custom-elements/is-sticky.js"></script>
 <script src="/js/main.js" type="module"></script>
 {% if useAutoStoreData %}
   <script src="/js/auto-store-data.js" type="module"></script>
 {% endif %}
 <script src="/js/button-menu.js" type="module"></script>
+
 <script src="/js/modal.js"></script>
 <script src="/js/scroll-to-section.js"></script>
 <script src="/js/expanded-state-tracker.js"></script>