diff --git a/app/assets/javascripts/stick-to-window-when-scrolling.js b/app/assets/javascripts/stick-to-window-when-scrolling.js
index 0a3176beb..c75779109 100644
--- a/app/assets/javascripts/stick-to-window-when-scrolling.js
+++ b/app/assets/javascripts/stick-to-window-when-scrolling.js
@@ -710,21 +710,36 @@
     this.recalculate();
   };
   Sticky.prototype.setEvents = function () {
-    var self = this;
+    this._scrollEvent = this.onScroll.bind(this);
+    this._resizeEvent = this.onResize.bind(this);
 
     // flag when scrolling takes place and check (and re-position) sticky elements relative to
     // window position
-    if (self._scrollTimeout === false) {
-      $(global).scroll(function (e) { self.onScroll(); });
-      self._scrollTimeout = global.setInterval(function (e) { self.checkScroll(); }, 50);
+    if (this._scrollTimeout === false) {
+      $(global).scroll(this._scrollEvent);
+      this._scrollTimeout = global.setInterval(this.checkScroll.bind(this), 50);
     }
 
     // Recalculate all dimensions when the window resizes
-    if (self._resizeTimeout === false) {
-      $(global).resize(function (e) { self.onResize(); });
-      self._resizeTimeout = global.setInterval(function (e) { self.checkResize(); }, 50);
+    if (this._resizeTimeout === false) {
+      $(global).resize(this._resizeEvent);
+      this._resizeTimeout = global.setInterval(this.checkResize.bind(this), 50);
     }
   };
+  Sticky.prototype.clearEvents = function () {
+    if (this._scrollTimeout !== false) {
+      $(global).off('scroll', this._scrollEvent);
+      global.clearInterval(this._scrollTimeout);
+      this._scrollTimeout = false;
+    }
+
+    if (this._resizeTimeout !== false) {
+      $(global).off('resize', this._resizeEvent);
+      global.clearInterval(this._resizeTimeout);
+      this._resizeTimeout = false;
+    }
+
+  };
   Sticky.prototype.viewportIsWideEnough = function (windowWidth) {
     return windowWidth > 768;
   };
diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js
index c1130f1ce..968712134 100644
--- a/tests/javascripts/fullscreenTable.test.js
+++ b/tests/javascripts/fullscreenTable.test.js
@@ -181,7 +181,7 @@ describe('FullscreenTable', () => {
     test("when the page has scrolled", () => {
 
       // scroll the window so the table fills the height of the window (768px)
-      windowMock.scrollBy(500);
+      windowMock.scrollTo(500);
 
       // the frames should crop to the window height
       expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px');
diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
new file mode 100644
index 000000000..fec68663f
--- /dev/null
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -0,0 +1,1336 @@
+const helpers = require('./support/helpers');
+const PADDING_BETWEEN_STICKYS = 40;
+const PADDING_BEFORE_STOPPING_POINT = 10;
+
+function getScreenItemBottomPosition (screenItem) {
+  return screenItem.offsetTop + screenItem.offsetHeight;
+};
+
+function getCaretPosition (caretPosition, textarea) {
+
+  return {
+    top: textarea.offsetTop + caretPosition.top,
+    bottom: textarea.offsetTop + caretPosition.top + caretPosition.height,
+    height: caretPosition.height
+  };
+
+};
+
+function getStickyGroupPosition (screenMock, opts) {
+
+  const edgePosition = screenMock.window[opts.edge];
+  const height = opts.stickyEls
+                  .map(el => el.offsetHeight)
+                  .reduce((accumulator, height) => accumulator + height);
+
+  if (opts.edge === 'top') {
+    return {
+      top: screenMock.window.top,
+      bottom: edgePosition + height,
+      height: height
+    };
+  } else {
+    return {
+      top: edgePosition - height,
+      bottom: screenMock.window.bottom,
+      height: height
+    }
+  }
+
+};
+
+class CaretCoordinates {
+  constructor (data) {
+    this.top = 5.5;
+    this.left = 2;
+    this.height = 19;
+  }
+
+  moveToLine (lineNumber) {
+    const lineHeight = 30;
+    const verticalPadding = 5.5;
+
+    this.top = ((lineNumber - 1) * lineHeight) + verticalPadding;
+  }
+}
+
+beforeAll(() => {
+  require('../../app/assets/javascripts/stick-to-window-when-scrolling.js');
+});
+
+afterAll(() => {
+  require('./support/teardown.js');
+});
+
+describe("Stick to top/bottom of window when scrolling", () => {
+
+  let screenMock;
+
+  describe("If intending to stick to the top", () => {
+
+    let inputForm;
+    let formFooter;
+    let footer;
+    let windowHeight;
+    let getFurthestTopPoint;
+
+    beforeEach(() => {
+
+      document.body.innerHTML = `
+        <div class="grid-row">
+          <main class="column-three-quarters column-main">
+            <form method="post" autocomplete="off">
+              <div class="grid-row js-stick-at-top-when-scrolling">
+                <div class="column-two-thirds ">
+                  <div class="form-group" data-module="">
+                    <label class="form-label" for="placeholder_value">
+                      name
+                    </label>
+                    <input class="form-control form-control-1-1 " data-module="" id="placeholder_value" name="placeholder_value" required="" rows="8" type="text" value="">
+                  </div>
+                </div>
+              </div>
+              <div class="page-footer">
+                <button type="submit" class="button">Continue</button>
+              </div>
+            </form>
+          </main>
+        </div>
+        <footer class="js-footer"></footer>`;
+
+      inputForm = document.querySelector('form > .grid-row');
+      formFooter = document.querySelector('.page-footer');
+      footer = document.querySelector('.js-footer');
+
+      windowHeight = 940;
+
+      // mock the rendering of all components
+      screenMock = new helpers.ScreenMock(jest);
+      screenMock.setWindow({
+        width: 1990,
+        height: windowHeight,
+        scrollTop: 0
+      });
+      screenMock.mockPositionAndDimension('inputForm', inputForm, {
+        offsetHeight: 168,
+        offsetWidth: 727,
+        offsetTop: 238
+      });
+      screenMock.mockPositionAndDimension('formFooter', formFooter, {
+        offsetHeight: 200,
+        offsetWidth: 727,
+        offsetTop: inputForm.offsetTop + 200
+      });
+      screenMock.mockPositionAndDimension('footer', footer, {
+        offsetHeight: 535,
+        offsetWidth: 1990,
+        offsetTop: formFooter.offsetTop + formFooter.offsetHeight
+      });
+
+      getFurthestTopPoint = (stickysHeight) => {
+        return footer.offsetTop - PADDING_BEFORE_STOPPING_POINT - stickysHeight;
+      };
+
+      // the sticky JS polls for changes to position/dimension so we need to fake setTimeout and setInterval
+      jest.useFakeTimers();
+
+    });
+
+    afterEach(() => {
+
+      document.body.innerHTML = '';
+
+      window.GOVUK.stickAtTopWhenScrolling.clearEvents();
+
+      screenMock.reset();
+
+    });
+
+    test("if top of viewport is above top of element on load, the element should not be marked as sticky", () => {
+
+      // scroll position defaults to 0, element top defaults to 138px
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(inputForm.classList.contains('content-fixed-onload')).toBe(false);
+      expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+    });
+
+    test("if the window is 768px or less wide and the top of the viewport is below top of element on load, the element should not be marked as sticky", () => {
+
+      screenMock.window.resizeTo({
+        height: windowHeight,
+        width: 768
+      });
+
+      // scroll past top of form
+      screenMock.scrollTo(inputForm.offsetTop + 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(inputForm.classList.contains('content-fixed')).toBe(false);
+      expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+    });
+
+    describe("if top of viewport is below top of element but still in the scroll area on load", () => {
+
+      beforeEach(() => {
+
+        // scroll past the top of the form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      test("the element should be marked as already sticky", () => {
+
+        // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+        expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+      });
+
+      test("a 'shim' element with dimensions matching the sticky element should be added to the document to take up the space it no longer occupies", () => {
+
+        const shim = inputForm.previousElementSibling;
+
+        expect(shim).not.toBeNull();
+        expect(shim.classList.contains('shim')).toBe(true);
+        expect(shim.style.height).toEqual(`${inputForm.offsetHeight}px`);
+        expect(shim.style.marginTop).toEqual(''); // 0px would return an empty string
+        expect(shim.style.marginBottom).toEqual(''); // 0px would return an empty string
+
+      });
+
+    });
+
+    test("if top of viewport is below the furthest point the top of the element can go in the scroll area on load, the element should be marked as stopped", () => {
+
+      // the element should stop a set distance from the stopping point
+      const furthestTopPoint = getFurthestTopPoint(inputForm.offsetHeight);
+
+      // scroll past the furthest point
+      screenMock.scrollTo(furthestTopPoint + 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+      expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+      expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+      // elements are stopped by adding inline styles
+      expect(inputForm.style.position).toEqual('absolute');
+      expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
+
+    });
+
+    describe("if viewport top starts above element top", () => {
+
+      beforeEach(() => {
+
+        // default scroll position is above top of form
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so top of it is below the top of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // scroll past top of form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(inputForm.classList.contains('content-fixed')).toBe(true);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+      test("if window is scrolled so top of it is below the furthest point the top of the element can go in the scroll area, the element should be stopped", () => {
+
+        const furthestTopPoint = getFurthestTopPoint(inputForm.offsetHeight);
+
+        // scroll past top of form
+        screenMock.scrollTo(furthestTopPoint + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(inputForm.classList.contains('content-fixed')).toBe(true);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(inputForm.style.position).toEqual('absolute');
+        expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
+
+      });
+
+    });
+
+    describe("if viewport top starts below element top", () => {
+
+      beforeEach(() => {
+
+        // scroll past top of form
+        screenMock.scrollTo(inputForm.offsetTop + 10);
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so top of it is above the top of the element, the element should be made not sticky", () => {
+
+        // scroll to top
+        screenMock.scrollTo(0);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        expect(inputForm.classList.contains('content-fixed')).toBe(false);
+        expect(inputForm.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+    });
+
+    describe("if element is made sticky and another element underneath it is focused", () => {
+
+      let checkbox;
+      let checkboxBottom;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        inputForm.insertAdjacentHTML('afterEnd', '<input type="checkbox" name="confirm" value="yes" />');
+        checkbox = document.querySelector('input[type=checkbox]');
+
+        screenMock.mockPositionAndDimension('checkbox', checkbox, {
+          offsetHeight: 50, // 118px smaller than the sticky
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+
+        checkboxBottom = getScreenItemBottomPosition(checkbox);
+
+        // move the sticky over the checkbox. It's 168px high so this position will cause it to overlap.
+        screenMock.scrollTo(checkbox.offsetTop - 10);
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+
+      });
+
+      test("the window should scroll so the focused element is revealed", () => {
+
+        // update inputForm position as DOM normally would
+        inputForm.offsetTop = screenMock.window.top;
+
+        let stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+
+        // sticky position should overlap checkbox position
+        expect(stickyPosition.top).toBeLessThanOrEqual(checkbox.offsetTop);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(checkboxBottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        checkbox.focus();
+
+        stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, checkbox.offsetTop - stickyPosition.height]);
+
+      });
+
+    });
+
+    describe("if element is made sticky and overlaps a textarea", () => {
+
+      let textarea;
+      let textareaBottom;
+      let caretCoordinates;
+      let caretCoordinatesMock;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        inputForm.insertAdjacentHTML('afterEnd', '<textarea name="notes"></textarea>');
+        textarea = document.querySelector('textarea');
+
+        // line height: 30px, text height: 19px, lines: 10
+        screenMock.mockPositionAndDimension('textarea', textarea, {
+          offsetHeight: 300,
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+
+        textareaBottom = getScreenItemBottomPosition(textarea);
+
+        // mock calls for caret position, relative to textarea
+        caretCoordinatesMock = jest.fn(() => caretCoordinates);
+        window.getCaretCoordinates = caretCoordinatesMock;
+
+        // start caret on first line
+        caretCoordinates = new CaretCoordinates();
+
+        // move the sticky so it overlaps the top 168px of the textarea.
+        screenMock.scrollTo(textarea.offsetTop);
+
+        // update inputForm position as DOM normally would
+        inputForm.offsetTop = screenMock.window.top;
+
+        window.GOVUK.stickAtTopWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+        caretCoordinatesMock.mockClear();
+
+      });
+
+      test("if the textarea receives focus while its caret is underneath, the window should scroll to reveal the caret", () => {
+
+        // caret is on first line
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThanOrEqual(caretPosition.top);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(caretPosition.bottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        textarea.focus();
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.top - stickyPosition.height]);
+
+      });
+
+      test("if the caret is moved so it isn't underneath the sticky element, the window shouldn't scroll", () => {
+
+        // start caret on 7th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(7);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // the sticky element should be above the caret
+        expect(stickyPosition.bottom).toBeLessThan(caretPosition.top);
+
+        textarea.focus();
+
+        // no scrolling should have happened
+        expect(screenMock.window.spies.window.scrollTo.mock.calls.length).toEqual(0);
+
+      });
+
+      test("if the caret is moved to be underneath the sticky element, the window should scroll to reveal the caret", () => {
+
+        // start caret on 7th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(7);
+
+        // make sure the textarea has focus
+        textarea.focus();
+
+        // line 6 is under the sticky element
+        caretCoordinates.moveToLine(6);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [inputForm], edge: 'top' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky should now overlap the caret
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(caretPosition.top);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        helpers.triggerEvent(textarea, 'keyup', { interface: window.KeyboardEvent });
+
+        // the bottom of the sticky element should be at the top of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.top - stickyPosition.height]);
+
+      });
+
+    });
+
+    describe("if mode is set to 'dialog' and multiple sticky elements share the same scroll area", () => {
+
+      let radios;
+
+      beforeEach(() => {
+
+        const inputFormBottom = getScreenItemBottomPosition(inputForm);
+
+        // set mode to 'dialog' so sticky elements are treated as one item
+        window.GOVUK.stickAtTopWhenScrolling.setMode('dialog')
+
+        // add another sticky element before the form footer
+        radios = helpers.getRadioGroup({
+          cssClasses: ['js-stick-at-top-when-scrolling'],
+          name: 'send-time',
+          label: 'send time',
+          fields: [
+            {
+              label: 'Now',
+              value: 'now',
+              checked: true
+            },
+            {
+              label: 'Tomorrow',
+              value: 'tomorrow',
+              checked: false
+            },
+            {
+              label: 'Friday',
+              value: 'friday',
+              checked: false
+            }
+          ]
+        });
+        formFooter.parentNode.insertBefore(radios, formFooter);
+        screenMock.mockPositionAndDimension('radios', radios, {
+          offsetHeight: 175,
+          offsetWidth: 727,
+          offsetTop: inputFormBottom
+        });
+        const radiosBottom = getScreenItemBottomPosition(radios);
+
+        // adjust other screen items
+
+        // formFooter top should be at the radios bottom
+        formFooter.offsetTop = radiosBottom;
+
+        // footer top should be at formFooter's bottom
+        footer.offsetTop = getScreenItemBottomPosition(formFooter);
+
+      });
+
+      afterEach(() => {
+
+        window.GOVUK.stickAtTopWhenScrolling.setMode('default');
+
+      });
+
+      describe("if window top is below the top of the highest element on load", () => {
+
+        beforeEach(() => {
+
+          // scroll past top of first sticky element
+          screenMock.scrollTo(inputForm.offsetTop + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init();
+
+        });
+
+        test("both should be marked as already sticky", () => {
+
+          // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+          expect(radios.classList.contains('content-fixed-onload')).toBe(true);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+          expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+          expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("the lowest element should have the drop-shadow", () => {
+
+          expect(radios.classList.contains('content-fixed__top')).toBe(true);
+
+        });
+
+        test("they should be stacked from the top edge of the viewport in the order they appear in the document", () => {
+
+          expect(inputForm.style.top).toEqual('0px');
+
+          // dialog mode removes enough padding to deal with that each sticky element is given to give its content enough space from the surrounding page
+          expect(radios.style.top).toEqual(`${inputForm.offsetHeight - PADDING_BETWEEN_STICKYS}px`);
+
+        });
+
+      });
+
+      describe("if window top is below the furthest point the highest element can go on load", () => {
+
+        let furthestTopPoint;
+
+        beforeEach(() => {
+
+          // ensure each sticky element is positioned correctly relative to the furthest point
+          const dialogHeight = (inputForm.offsetHeight + radios.offsetHeight) - PADDING_BETWEEN_STICKYS;
+
+          furthestTopPoint = getFurthestTopPoint(dialogHeight);
+
+          // scroll past top of first sticky element
+          screenMock.scrollTo(furthestTopPoint + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init();
+
+        });
+
+        test("both should be stopped so the bottom of their stack is at the furthest point", () => {
+
+          expect(inputForm.style.position).toEqual('absolute');
+          expect(radios.style.position).toEqual('absolute');
+
+          expect(inputForm.style.top).toEqual(`${furthestTopPoint}px`);
+          expect(radios.style.top).toEqual(`${footer.offsetTop - PADDING_BEFORE_STOPPING_POINT - radios.offsetHeight}px`);
+
+        });
+
+      });
+
+      describe("if the group of sticky elements is taller than the window when stuck together", () => {
+
+        // the sticky behaviour should stick as many elements as possible to the top of the viewport
+        // the rest should be put back into their place in the document
+        beforeEach(() => {
+
+          const windowHeight = 460;
+
+          function makeStickysBiggerThanWindow () {
+
+            // make the radios too big to fit in the viewport
+            const fields = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+              .map(field => {
+                return {
+                  label: field,
+                  value: field.toLowerCase(),
+                  checked: false
+                }
+              });
+
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+
+            radios.offsetHeight = 475;
+
+          };
+
+          function adjustScreenPositions () {
+
+            const radiosBottom = getScreenItemBottomPosition(radios);
+
+            screenMock.window.setHeightTo(windowHeight);
+
+            // formFooter top should be at the radios bottom
+            formFooter.offsetTop = radiosBottom;
+
+            // footer top should be at formFooter's bottom
+            footer.offsetTop = getScreenItemBottomPosition(formFooter);
+
+          };
+
+          makeStickysBiggerThanWindow();
+          adjustScreenPositions();
+
+          screenMock.scrollTo(inputForm.offsetTop + 10);
+
+          window.GOVUK.stickAtTopWhenScrolling.init()
+
+        });
+
+        test("the number of elements in the group that are stuck should be reduced until it fits into the viewport", () => {
+
+          // when the group is stuck, pageFooter is closest to the viewport edge so should stay sticky
+          expect(inputForm.classList.contains('content-fixed-onload')).toBe(true);
+          expect(inputForm.classList.contains('content-fixed')).toBe(false);
+
+          // radios are made not sticky
+          expect(radios.classList.contains('content-fixed-onload')).toBe(false);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("window is scrolled so the sticky elements (stuck and not stuck) appear in sequence", () => {
+
+          // we assume it's useful to start by seeing all the elements in the position they normally sit in the page
+          expect(screenMock.window.top).toEqual(inputForm.offsetTop);
+
+        });
+
+      });
+
+    });
+
+  });
+
+  describe("If intending to stick to the bottom", () => {
+
+    let header;
+    let content;
+    let pageFooter;
+    let windowHeight;
+    let getFurthestBottomPoint;
+
+    beforeEach(() => {
+
+      document.body.innerHTML = `
+        <main role="main" class="column-three-quarters column-main">
+          <a class="govuk-back-link" href="">Back</a>
+          <h1 class="heading-large js-header">
+            Preview of ‘Content email’
+          </h1>
+          <div class="wrapper">
+            <div class="email-message-body">
+              <h2>This is the title</h2>
+              <p>This is a paragraph, defined as a block of content where the contents run horizontally across lines.</p>
+              <table role="presentation">
+                <tbody>
+                  <tr>
+                    <td>
+                      <ul>
+                        <li>these</li>
+                        <li>are</li>
+                        <li>bullet points</li>
+                      </ul>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <blockquote>
+                <p>This block of text is formatted to stand out from the rest</p>
+              </blockquote>
+              <p>This is a paragraph with a horizontal line underneath.</p>
+              <hr>
+              <p>This is a paragraph with a horizontal line above.</p>
+              <p>This paragraph has a link in it: <a href="https://www.gov.uk">https://www.gov.uk</a>.</p>
+            </div>
+            <div class="page-footer js-stick-at-bottom-when-scrolling">
+              <form method="post" action="">
+                  <button type="submit" class="button">Send 1 email </button>
+              </form>
+            </div>
+          </div>
+        </main>`;
+
+      heading = document.querySelector('.js-header');
+      content = document.querySelector('.email-message-body');
+      pageFooter = document.querySelector('.page-footer');
+
+      windowHeight = 940;
+
+      // mock the rendering of all components
+      screenMock = new helpers.ScreenMock(jest);
+      screenMock.setWindow({
+        width: 1990,
+        height: windowHeight,
+        scrollTop: 0
+      });
+      screenMock.mockPositionAndDimension('heading', heading, {
+        offsetHeight: 75,
+        offsetWidth: 727,
+        offsetTop: 185
+      });
+      screenMock.mockPositionAndDimension('content', content, {
+        offsetHeight: 900,
+        offsetWidth: 727,
+        offsetTop: heading.offsetTop + heading.offsetHeight
+      });
+      screenMock.mockPositionAndDimension('pageFooter', pageFooter, {
+        offsetHeight: 50,
+        offsetWidth: 727,
+        offsetTop: content.offsetTop + content.offsetHeight
+      });
+
+      getFurthestBottomPoint = (stickysTotalHeight) => {
+        const headingBottom = getScreenItemBottomPosition(heading);
+
+        return headingBottom + PADDING_BEFORE_STOPPING_POINT + stickysTotalHeight;
+      };
+
+      // the sticky JS polls for changes to position/dimension so we need to fake setTimeout and setInterval
+      jest.useFakeTimers();
+
+    });
+
+    afterEach(() => {
+
+      window.GOVUK.stickAtBottomWhenScrolling.clearEvents();
+
+    });
+
+    test("if bottom of viewport is below bottom of element on load, the element should not be marked as sticky", () => {
+
+      const pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+      // scroll so the bottom of the window goes past the bottom of the element
+      screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+
+      window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false);
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+    });
+
+    test("if the window is 768px or less wide and the bottom of the viewport is above bottom of element on load, the element should not be marked as sticky", () => {
+
+      const pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+      screenMock.window.resizeTo({
+        height: windowHeight,
+        width: 768
+      });
+
+      // scroll past top of form
+      screenMock.scrollTo(pageFooterBottom - 10);
+
+      window.GOVUK.stickAtTopWhenScrolling.init();
+
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+    });
+
+    describe("if bottom of viewport is above bottom of element on load", () => {
+
+      beforeEach(() => {
+
+        // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px.
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      test("the element should be marked as already sticky", () => {
+
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+      });
+
+      test("a 'shim' element with dimensions matching the sticky element should be added to the document to take up the space it no longer occupies", () => {
+
+        const shim = pageFooter.nextElementSibling;
+
+        expect(shim).not.toBeNull();
+        expect(shim.classList.contains('shim')).toBe(true);
+        expect(shim.style.height).toEqual(`${pageFooter.offsetHeight}px`);
+        expect(shim.style.marginTop).toEqual(''); // 0px would return an empty string
+        expect(shim.style.marginBottom).toEqual(''); // 0px would return an empty string
+
+      });
+
+    });
+
+    test("if bottom of viewport is above the furthest point the bottom of the element can go in the scroll area on load, the element should be marked as stopped", () => {
+
+      // change window size so its bottom can go past stopping position
+      const windowHeight = 200;
+      const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
+
+      screenMock.window.setHeightTo(windowHeight);
+
+      // scroll the window bottom past the furthest point
+      screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10);
+
+      window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      // `.content-fixed-onload` adds the drop-shadow without fading in to show it did not become sticky from user interaction
+      expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+      expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+      // elements are stopped by adding inline styles
+      expect(pageFooter.style.position).toEqual('absolute');
+      expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
+
+    });
+
+    describe("if viewport bottom starts below element bottom", () => {
+
+      let pageFooterBottom;
+
+      beforeEach(() => {
+
+        pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+        // change window size so its bottom can go past stopping position
+        const windowHeight = 600;
+
+        screenMock.window.setHeightTo(windowHeight);
+
+        // scroll to just below the element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      test("if window is scrolled so bottom of it is above the bottom of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // scroll above bottom of sticky element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+      test("if window is scrolled so bottom of it is above the furthest point the bottom of the element can go in the scroll area, the element should be stopped", () => {
+
+        const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
+
+        // scroll past furthest point
+        screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(pageFooter.style.position).toEqual('absolute');
+        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
+
+      });
+
+      test("if window resizes so bottom is above the bottom of the element, the element should be marked so it becomes sticky to the user", () => {
+
+        // resize window so the bottom is 30px above the bottom of the element
+        screenMock.window.resizeTo({ height: 560, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        // `content-fixed` fades the drop-shadow in to show it became sticky from user interaction
+        expect(pageFooter.classList.contains('content-fixed')).toBe(true);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+    });
+
+    describe("if viewport bottom starts above element bottom", () => {
+
+      let pageFooterBottom;
+      let pageFooterShim;
+
+      beforeEach(() => {
+
+        // scroll position defaults to 0 so bottom of window starts at 940px. Element bottom defaults to 1160px so will be sticky on load.
+        pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+        // shim will be inserted, inheriting space in the page from pageFooter so store this data
+        const pageFooterData = {
+          offsetHeight: pageFooter.offsetHeight,
+          offsetWidth: pageFooter.offsetWidth,
+          offsetTop: pageFooter.offsetTop
+        };
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+        // add mock for shim
+        pageFooterShim = document.querySelector('.shim');
+        screenMock.mockPositionAndDimension('pageFooterShim', pageFooterShim, pageFooterData);
+
+      });
+
+      test("if window is scrolled so bottom of it is below the bottom of the element, the element should be made not sticky", () => {
+
+        // scroll so bottom of window is below bottom of element
+        screenMock.scrollTo((pageFooterBottom - windowHeight) + 10);
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a scroll
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false); // check the class for onload isn't applied
+
+      });
+
+      test("if window resizes so bottom is below the bottom of the element, the element should be made not sticky", () => {
+
+        // resize window so the bottom is 30px above the bottom of the element
+        screenMock.window.resizeTo({ height: pageFooterBottom + 10, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(false);
+
+      });
+
+      test("if window resizes so bottom is above the furthest point the bottom of the element can go in the scroll area, the element should be stopped", () => {
+
+        const furthestBottomPoint = getFurthestBottomPoint(pageFooter.offsetHeight);
+
+        // resize window so the bottom is above the furthest point
+        screenMock.window.resizeTo({ height: furthestBottomPoint - 10, width: screenMock.window.width });
+        jest.advanceTimersByTime(60); // fake advance of time to something similar to that for a resize
+
+        expect(pageFooter.classList.contains('content-fixed')).toBe(false); // applied if made sticky after page load
+        expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true); // check the class for onload isn't applied
+
+        // elements are stopped by adding inline styles
+        expect(pageFooter.style.position).toEqual('absolute');
+        expect(pageFooter.style.top).toEqual(`${furthestBottomPoint - pageFooter.offsetHeight}px`);
+
+      });
+
+    });
+
+    describe("if element is made sticky and another element underneath it is focused", () => {
+
+      let checkbox;
+      let checkboxBottom;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        content.insertAdjacentHTML('afterEnd', '<input type="checkbox" name="confirm" value="yes" />');
+        checkbox = document.querySelector('input[type=checkbox]');
+
+        screenMock.mockPositionAndDimension('checkbox', checkbox, {
+          offsetHeight: 40, // 10px smaller than the sticky
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+
+        checkboxBottom = getScreenItemBottomPosition(checkbox);
+
+        // move the sticky over the checkbox. It's 50px high so this position will cause it to overlap.
+        screenMock.scrollTo((checkboxBottom - windowHeight) + 5);
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+
+      });
+
+      test("the window should scroll so the focused element is revealed", () => {
+
+        // update inputForm position as DOM normally would
+        pageFooter.offsetTop = screenMock.window.bottom - pageFooter.offsetHeight;
+
+        let stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+
+        // sticky position should overlap checkbox position
+        expect(stickyPosition.top).toBeLessThanOrEqual(checkbox.offsetTop);
+        expect(stickyPosition.bottom).toBeGreaterThanOrEqual(checkboxBottom);
+
+        // the sticky element (page footer) is 50 high so should cover the last of the radios if the bottom edge of the viewport is at its bottom
+        checkbox.focus();
+
+        stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+
+        // the top of the sticky element should be at the bottom of the checkbox
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, (checkboxBottom + pageFooter.offsetHeight) - windowHeight]);
+
+      });
+
+    });
+
+    describe("if element is made sticky and overlaps a textarea", () => {
+
+      let textarea;
+      let textareaBottom;
+      let caretCoordinates;
+      let caretCoordinatesMock;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        content.insertAdjacentHTML('afterEnd', '<textarea name="notes"></textarea>');
+        textarea = document.querySelector('textarea');
+
+        // line height: 30px, text height: 19px, 10 lines.
+        screenMock.mockPositionAndDimension('textarea', textarea, {
+          offsetHeight: 300,
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+
+        textareaBottom = getScreenItemBottomPosition(textarea);
+
+        // start caret on the last line
+        caretCoordinates = new CaretCoordinates();
+        caretCoordinates.moveToLine(10);
+        caretCoordinatesMock = jest.fn(() => caretCoordinates);
+        window.getCaretCoordinates = caretCoordinatesMock;
+
+        // move the sticky so it overlaps the bottom 50px of the textarea.
+        screenMock.scrollTo(textareaBottom - windowHeight);
+
+        // update content position as DOM normally would
+        pageFooter.offsetTop = screenMock.window.bottom - pageFooter.offsetHeight;
+
+        window.GOVUK.stickAtBottomWhenScrolling.init();
+
+      });
+
+      afterEach(() => {
+
+        screenMock.window.spies.window.scrollTo.mockClear();
+        caretCoordinatesMock.mockClear();
+
+      });
+
+      test("if the textarea receives focus while its caret is underneath, the window should scroll to reveal the caret", () => {
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThan(caretPosition.bottom);
+
+        textarea.focus();
+
+        // the top of the sticky element should be at the bottom of the caret
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.bottom - (windowHeight - stickyPosition.height)]);
+
+      });
+
+      test("if the caret is moved so it isn't underneath the sticky element, the window shouldn't scroll", () => {
+
+        // start caret on 8th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(8);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // the sticky element should be below the caret
+        expect(stickyPosition.top).toBeGreaterThan(caretPosition.bottom);
+
+        textarea.focus();
+
+        // no scrolling should have happened
+        expect(screenMock.window.spies.window.scrollTo.mock.calls.length).toEqual(0);
+
+      });
+
+      test("if the caret is moved to be underneath the sticky element, the window should scroll to reveal the caret", () => {
+
+        // start caret on 8th line which isn't under the sticky element.
+        caretCoordinates.moveToLine(8);
+
+        // make sure the textarea has focus
+        textarea.focus();
+
+        // move the caret underneath the sticky element
+        caretCoordinates.moveToLine(9);
+
+        const stickyPosition = getStickyGroupPosition(screenMock, { stickyEls: [pageFooter], edge: 'bottom' });
+        const caretPosition = getCaretPosition(caretCoordinates, textarea);
+
+        // sticky position should overlap caret position
+        expect(stickyPosition.top).toBeLessThan(caretPosition.bottom);
+
+        // simulate a press of the down arrow
+        helpers.triggerEvent(textarea, 'keyup', { interface: window.KeyboardEvent });
+
+        // the top of the sticky element should be at the bottom of the caret
+        expect(screenMock.window.spies.window.scrollTo.mock.calls[0]).toEqual([0, caretPosition.bottom - (windowHeight - stickyPosition.height)]);
+
+      });
+
+    });
+
+    describe("if mode is set to 'dialog' and multiple sticky elements have the same scroll area", () => {
+
+      let radios;
+
+      beforeEach(() => {
+
+        const contentBottom = getScreenItemBottomPosition(content);
+
+        // set mode to 'dialog' so sticky elements are treated as one item
+        window.GOVUK.stickAtBottomWhenScrolling.setMode('dialog')
+
+        // add another sticky element before the form footer
+        radios = helpers.getRadioGroup({
+          cssClasses: ['js-stick-at-bottom-when-scrolling'],
+          name: 'send-time',
+          label: 'Send time',
+          fields: [
+            {
+              label: 'Now',
+              value: 'now',
+              checked: true
+            },
+            {
+              label: 'Tomorrow',
+              value: 'tomorrow',
+              checked: false
+            },
+            {
+              label: 'Friday',
+              value: 'friday',
+              checked: false
+            }
+          ]
+        });
+
+        pageFooter.parentNode.insertBefore(radios, pageFooter);
+        screenMock.mockPositionAndDimension('radios', radios, {
+          offsetHeight: 175,
+          offsetWidth: 727,
+          offsetTop: contentBottom
+        });
+        const radiosBottom = getScreenItemBottomPosition(radios);
+
+        // adjust other screen items
+
+        // pageFooter top should be at the radios bottom
+        pageFooter.offsetTop = radiosBottom;
+
+      });
+
+      afterEach(() => {
+
+        window.GOVUK.stickAtBottomWhenScrolling.setMode('default');
+
+      });
+
+      describe("if window bottom is above the bottom of the lowest element on load", () => {
+
+        let pageFooterBottom;
+
+        beforeEach(() => {
+
+          pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+          // scroll to just above the element
+          screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+
+          window.GOVUK.stickAtBottomWhenScrolling.init();
+
+        });
+
+        test("both should be marked as already sticky", () => {
+
+          expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+          expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("the highest element should have the drop-shadow", () => {
+
+          expect(radios.classList.contains('content-fixed__bottom')).toBe(true);
+
+        });
+
+        test("they should be stacked from the bottom edge of the viewport in the order they appear in the document", () => {
+
+          expect(radios.style.bottom).toEqual(`${pageFooter.offsetHeight - PADDING_BETWEEN_STICKYS}px`);
+
+        });
+
+      });
+
+      describe("if window bottom is above the furthest point the lowest element can go on load", () => {
+
+        let headingBottom;
+
+        beforeEach(() => {
+
+          const dialogHeight = (pageFooter.offsetHeight + radios.offsetHeight) - PADDING_BETWEEN_STICKYS;
+          const furthestBottomPoint = getFurthestBottomPoint(dialogHeight);
+
+          // change window size so its bottom can go past stopping position
+          const windowHeight = 200;
+
+          headingBottom = getScreenItemBottomPosition(heading);
+
+          screenMock.window.setHeightTo(windowHeight);
+
+          screenMock.scrollTo((furthestBottomPoint - windowHeight) - 10)
+
+          window.GOVUK.stickAtBottomWhenScrolling.init();
+
+        });
+
+        test("both should be stopped so the top of their stack is at the furthest point", () => {
+
+          expect(radios.style.position).toEqual('absolute');
+          expect(pageFooter.style.position).toEqual('absolute');
+          expect(radios.style.top).toEqual(`${headingBottom + PADDING_BEFORE_STOPPING_POINT}px`);
+          expect(pageFooter.style.top).toEqual(`${headingBottom + PADDING_BEFORE_STOPPING_POINT + (radios.offsetHeight - PADDING_BETWEEN_STICKYS)}px`);
+
+        });
+
+      });
+
+      describe("if the group of sticky elements is taller than the window when stuck together", () => {
+
+        let windowHeight;
+        let pageFooterBottom;
+
+        // the sticky behaviour should stick as many elements as possible to the bottom of the viewport
+        // the rest should be put back into their place in the document
+        beforeEach(() => {
+
+          windowHeight = 460;
+
+          function makeStickysBiggerThanWindow () {
+
+            // make the radios too big to fit in the viewport
+            const fields = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
+              .map(field => {
+                return {
+                  label: field,
+                  value: field.toLowerCase(),
+                  checked: false
+                }
+              });
+
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+
+            radios.offsetHeight = 475;
+
+          };
+
+          function adjustScreenPositions () {
+
+            const radiosBottom = getScreenItemBottomPosition(radios);
+
+            screenMock.window.setHeightTo(windowHeight);
+
+            // formFooter top should be at the radios bottom
+            pageFooter.offsetTop = radiosBottom;
+
+          };
+
+          makeStickysBiggerThanWindow();
+          adjustScreenPositions();
+
+          pageFooterBottom = getScreenItemBottomPosition(pageFooter);
+
+          screenMock.scrollTo((pageFooterBottom - windowHeight) - 10);
+
+          window.GOVUK.stickAtBottomWhenScrolling.init()
+
+        });
+
+        test("the number of elements in the group that are stuck should be reduced until it fits into the viewport", () => {
+
+          // when the group is stuck, pageFooter is closest to the viewport edge so should stay sticky
+          expect(pageFooter.classList.contains('content-fixed-onload')).toBe(true);
+          expect(pageFooter.classList.contains('content-fixed')).toBe(false);
+
+          // radios are made not sticky
+          expect(radios.classList.contains('content-fixed-onload')).toBe(false);
+          expect(radios.classList.contains('content-fixed')).toBe(false);
+
+        });
+
+        test("window is scrolled so the sticky elements (stuck and not stuck) appear in sequence", () => {
+
+          // we assume it's useful to start by seeing all the elements in the position they normally sit in the page
+          expect(screenMock.window.top).toEqual(pageFooterBottom - windowHeight);
+
+        });
+
+      });
+
+    });
+
+  });
+
+});
diff --git a/tests/javascripts/support/helpers.js b/tests/javascripts/support/helpers.js
index ee56ae375..5c1408fff 100644
--- a/tests/javascripts/support/helpers.js
+++ b/tests/javascripts/support/helpers.js
@@ -1,3 +1,20 @@
+function getDescriptorForProperty (prop, obj) {
+  const descriptors = Object.getOwnPropertyDescriptors(obj);
+  const prototype = Object.getPrototypeOf(obj);
+
+  if ((descriptors !== {}) && (prop in descriptors)) {
+    return descriptors[prop];
+  }
+
+  // if not in this object's descriptors, check the prototype chain
+  if (prototype !== null) {
+    return getDescriptorForProperty(prop, prototype);
+  }
+
+  // no descriptor for this prop and no prototypes left in the chain
+  return null;
+};
+
 const triggerEvent = (el, evtType, options) => {
   const eventInit = {
     bubbles: true,
@@ -69,6 +86,39 @@ const triggerEvent = (el, evtType, options) => {
   el.dispatchEvent(evt);
 };
 
+function getRadios (fields) {
+  const result = '';
+
+  return fields.map((field, idx) => {
+    const count = idx + 1;
+
+    return `
+      <div class="multiple-choice">
+        <input id="choose-${field.name}-1" name="choose-${field.name}-1" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="block-label" for="choose-${field.name}-1">
+          ${field.label}
+        </label>
+      </div>`;
+  }).join("\n");
+};
+
+function getRadioGroup (data) {
+  let radioGroup = document.createElement('div');
+
+  data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  radioGroup.innerHTML = `
+    <div class="form-group ">
+      <fieldset id="choose-${data.name}">
+        <legend class="form-label">
+           Choose ${data.label}
+        </legend>
+        ${getRadios(data.fields)}
+      </fieldset>
+    </div>`;
+
+    return radioGroup;
+};
+
 function clickElementWithMouse (el) {
   triggerEvent(el, 'mousedown');
   triggerEvent(el, 'mouseup');
@@ -173,27 +223,77 @@ class WindowMock {
       height: window.innerHeight,
       width: window.innerWidth
     };
-    this._spies = {
-      document: {}
+    this.spies = {
+      document: {},
+      window: {}
     };
     this._jest = jest;
+    this._setSpies();
+    this._plugJSDOM();
+  }
+
+  get top () {
+    return window.scrollY;
+  }
+
+  get bottom () {
+    return window.scrollY + window.innerHeight;
+  }
+
+  get height () {
+    return window.innerHeight;
+  }
+
+  get width () {
+    return window.innerWidth
+  }
+
+  get scrollPosition () {
+    return window.scrollY;
+  }
+
+  _setSpies () {
+
+    // remove calls to document.documentElement.clientHeight when jQuery is gone. It's called to support older browsers like IE8
+    this.spies.document.clientHeight = this._jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(() => window.innerHeight);
+
+    // remove calls to document.documentElement.clientWidth when jQuery is gone. It's called to support older browsers like IE8
+    this.spies.document.clientWidth = this._jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => window.innerWidth);
+
+  }
+
+  _plugJSDOM () {
+
+    const self = this;
+
+    // JSDOM doesn't support .scrollTo
+    this.spies.window.scrollTo = this._jest.fn(function () {
+      let y;
+
+      // data sent as props in an object
+      if (arguments.length === 1) {
+        y = arguments[0].y;
+      } else {
+        y = arguments[1];
+      }
+
+      self.scrollTo(y);
+
+    });
+
+     window.scrollTo = this.spies.window.scrollTo;
+
   }
 
   setHeightTo (height) {
 
-    // mock DOM calls for window height
     window.innerHeight = height;
-    // remove calls to document.documentElement.clientHeight  when jQuery is gone. It's called to support older browsers like IE8
-    this._spies.document.clientHeight = this._jest.spyOn(document.documentElement, 'clientHeight', 'get').mockImplementation(() => height);
 
   }
 
   setWidthTo (width) {
 
-    // mock DOM calls for window width
     window.innerWidth = width;
-    // remove calls to document.documentElement.clientWidth  when jQuery is gone. It's called to support older browsers like IE8
-    this._spies.document.clientWidth = this._jest.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(() => height);
 
   }
 
@@ -205,9 +305,12 @@ class WindowMock {
 
   }
 
-  scrollBy (scrollPosition) {
+  scrollTo (scrollPosition) {
 
     document.documentElement.scrollTop = scrollPosition;
+    window.scrollY = scrollPosition;
+    window.pageYOffset = scrollPosition;
+
     triggerEvent(window, 'scroll');
 
   }
@@ -216,11 +319,11 @@ class WindowMock {
 
     window.innerHeight = this._defaults.height;
     window.innerWidth = this._defaults.width;
-    document.documentElement.scrollTop = 0;
+    this.scrollTo(0);
 
     // reset all spies
-    Object.keys(this._spies).forEach(key => {
-      const objectSpies = this._spies[key];
+    Object.keys(this.spies).forEach(key => {
+      const objectSpies = this.spies[key];
       Object.keys(objectSpies).forEach(key => objectSpies[key].mockClear());
     });
 
@@ -270,6 +373,162 @@ class SelectionMock extends DOMInterfaceMock {
   }
 
 }
+class ScreenRenderItem {
+  constructor (jest, node) {
+
+    this._jest = jest;
+    this._node = node;
+    this._storeProps();
+    this._mockAPICalls();
+
+  }
+
+  setData (itemData) {
+
+    // check all the item data is present
+    const itemProps = Object.keys(itemData);
+    const missingKeys = ScreenRenderItem.REQUIRED_PROPS.filter(prop => !itemProps.includes(prop));
+
+    this._data = {};
+
+    if (missingKeys.length) {
+      throw Error(`${itemData.name ? itemData.name : itemProps.join(', ')} is missing these properties: ${missingKeys.join(', ')}`);
+    }
+
+    // default left if not set
+    if (!('offsetLeft' in itemData)) { itemData.offsetLeft = 0; }
+
+    // copy onto internal store
+    Object.assign(this._data, itemData);
+
+  }
+
+  _getBoundingClientRect () {
+    const {offsetHeight, offsetWidth, offsetTop, offsetLeft} = this._data;
+    const x = offsetLeft - window.scrollX;
+    const y = offsetTop - window.scrollY;
+
+    return {
+      'x': x,
+      'y': y,
+      'top': (offsetHeight < 0) ? y + offsetHeight : y,
+      'left': (offsetWidth < 0) ? x + offsetWidth : x,
+      'bottom': (offsetTop + offsetHeight) - window.scrollY,
+      'right': (offsetLeft + offsetWidth) - window.scrollX,
+    };
+
+  }
+
+  reset () {
+
+    // reset DOMRect mock
+    this._node.getBoundingClientRect.mockClear();
+
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+
+      if (prop in this._propStore) {
+        // replace property implementation
+        Object.defineProperty(this._node, prop, this._propStore[prop]);
+      }
+
+    });
+
+  }
+
+  _storeProps () {
+
+    this._propStore = {};
+
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+      const descriptor = getDescriptorForProperty(prop, this._node);
+
+      if (descriptor !== null) {
+        this._propStore[prop] = descriptor;
+      }
+    });
+
+  }
+
+  // mock any calls to the node's DOM API for position/dimension
+  _mockAPICalls () {
+
+    // proxy boundingClientRect property calls to item data
+    this._jest.spyOn(this._node, 'getBoundingClientRect').mockImplementation(() => this._getBoundingClientRect());
+
+    // handle calls to offset properties
+    ScreenRenderItem.OFFSET_PROPS.forEach(prop => {
+
+      this._jest.spyOn(this._node, prop, 'get').mockImplementation(() => this._data[prop]);
+
+      // proxy DOM API sets for offsetValues (not possible to mock directly)
+      Object.defineProperty(this._node, prop, {
+        configurable: true,
+        set: jest.fn(value => {
+          this._data[prop] = value;
+          return true;
+        })
+      });
+
+    });
+
+  }
+
+}
+ScreenRenderItem.OFFSET_PROPS = ['offsetHeight', 'offsetWidth', 'offsetTop', 'offsetLeft'];
+ScreenRenderItem.REQUIRED_PROPS = ['name', 'offsetHeight', 'offsetHeight', 'offsetWidth', 'offsetTop'];
+
+class ScreenMock {
+  constructor (jest) {
+
+    this._jest = jest
+    this._items = {};
+
+  }
+
+  mockPositionAndDimension (itemName, node, itemData) {
+
+    if (itemName in this._items) { throw new Error(`${itemName} already has its position and dimension mocked`); }
+
+    const data = Object.assign({ 'name': itemName }, itemData);
+    const item = new ScreenRenderItem(this._jest, node);
+
+    item.setData(data);
+
+    this._items[itemName] = item;
+
+  }
+
+  setWindow (windowData) {
+
+    this.window = new WindowMock(this._jest);
+
+    // check all the window data is present
+    const missingKeys = Object.keys(windowData).filter(key => !ScreenMock.REQUIRED_WINDOW_PROPS.includes(key));
+
+    if (missingKeys.length) {
+      throw Error(`Window definition is missing these properties: ${missingKeys.join(', ')}`);
+    }
+
+    this.window.setHeightTo(windowData.height);
+    this.window.setWidthTo(windowData.width);
+    this.window.scrollTo(windowData.scrollTop);
+
+  }
+
+  scrollTo (scrollTop) {
+
+    this.window.scrollTo(scrollTop);
+
+  }
+
+  reset () {
+
+    Object.keys(this._items).forEach(itemName => this._items[itemName].reset());
+
+  }
+
+}
+ScreenMock.REQUIRED_WINDOW_PROPS = ['height', 'width', 'scrollTop'];
 
 // function to ask certain questions of a DOM Element
 const element = function (el) {
@@ -282,5 +541,8 @@ exports.moveSelectionToRadio = moveSelectionToRadio;
 exports.activateRadioWithSpace = activateRadioWithSpace;
 exports.RangeMock = RangeMock;
 exports.SelectionMock = SelectionMock;
+exports.getRadioGroup = getRadioGroup;
+exports.getRadios = getRadios;
 exports.element = element;
 exports.WindowMock = WindowMock;
+exports.ScreenMock = ScreenMock;