From ef76d4eeb3e71d81cb4f397e3820a1840cfb9875 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Sun, 4 Nov 2018 21:10:02 +0000
Subject: [PATCH] Record height of each sticky element

Function borrowed from stop-at-bottom JS.
---
 .../stick-at-top-when-scrolling.js            | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/stick-at-top-when-scrolling.js b/app/assets/javascripts/stick-at-top-when-scrolling.js
index 42636c47d..964ba2b9b 100644
--- a/app/assets/javascripts/stick-at-top-when-scrolling.js
+++ b/app/assets/javascripts/stick-at-top-when-scrolling.js
@@ -10,6 +10,7 @@
     _scrollTimeout: false,
     _hasResized: false,
     _resizeTimeout: false,
+    _els: [],
 
     getWindowDimensions: function () {
       return {
@@ -25,15 +26,35 @@
     getElementOffset: function ($el) {
       return $el.offset()
     },
+    setElHeight: function (el) {
+      var fixedOffset = parseInt(el.$fixedEl.css('top'), 10)
+      var $el = el.$fixedEl
+      var $img = $el.find('img')
+
+      fixedOffset = isNaN(fixedOffset) ? 0 : fixedOffset
+
+      if ($img.length > 0) {
+        var image = new global.Image()
+        image.onload = function () {
+          el.height = $el.outerHeight() + fixedOffset
+        }
+        image.src = $img.attr('src')
+      } else {
+        el.height = $el.outerHeight() + fixedOffset
+      }
+    },
     init: function () {
       var $els = $('.js-stick-at-top-when-scrolling')
 
       if ($els.length > 0) {
-        sticky.$els = $els
-
         $els.each(function (i, el) {
           var $el = $(el)
-          
+          var el = {
+            $fixedEl: $el
+          }
+
+          sticky.setElHeight(el)
+          sticky._els.push(el)
           $el.data('scrolled-from', sticky.getElementOffset($el).top)
         })
 
@@ -47,20 +68,6 @@
           sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50)
         }
       }
-      if (GOVUK.stopScrollingAtFooter) {
-        $els.each(function (i, el) {
-          var $img = $(el).find('img')
-          if ($img.length > 0) {
-            var image = new global.Image()
-            image.onload = function () {
-              GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight())
-            }
-            image.src = $img.attr('src')
-          } else {
-            GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight())
-          }
-        })
-      }
     },
     onScroll: function () {
       sticky._hasScrolled = true
@@ -79,8 +86,8 @@
 
         var windowDimensions = sticky.getWindowDimensions()
 
-        sticky.$els.each(function (i, el) {
-          var $el = $(el)
+        $.each(sticky._els, function (i, el) {
+          var $el = el.$fixedEl
           var scrolledFrom = $el.data('scrolled-from')
 
           if (scrolledFrom && sticky.scrolledFromInsideWindow(scrolledFrom)) {
@@ -97,8 +104,8 @@
 
         var windowDimensions = sticky.getWindowDimensions()
 
-        sticky.$els.each(function (i, el) {
-          var $el = $(el)
+        $.each(sticky._els, function (i, el) {
+          var $el = el.$fixedEl
 
           var elResize = $el.hasClass('js-sticky-resize')
           if (elResize) {