Add a check for a .js-sticky-resize class (#343)

If it exists soon the sticky element, then find the width of the parent
element (as we’re assuming by having set this class that it’s in a
grid-column that will change it’s width when resized).

Get the width of the parent element and set the width of the shim and
the width of the sticky element to match when the window is resized.

In the tests, create a wrapper element with a width defined (300px) to
check that the width is also set for the sticky element and shim.

javascripts/govuk/stick-at-top-when-scrolling.js

@@ -91,6 +91,15 @@
         sticky.$els.each(function (i, el) {
           var $el = $(el)
 
+          var elResize = $el.hasClass('js-sticky-resize')
+          if (elResize) {
+            var $shim = $('.shim')
+            var $elParent = $el.parent('div')
+            var elParentWidth = $elParent.width()
+            $shim.css('width', elParentWidth)
+            $el.css('width', elParentWidth)
+          }
+
           if (windowDimensions.width <= 768) {
             sticky.release($el)
           }

spec/unit/stick-at-top-when-scrolling.spec.js

@@ -80,6 +80,25 @@ describe('stick-at-top-when-scrolling', function () {
       expect($stickyElement.hasClass('content-fixed')).toBe(true)
     })
 
+    it('should check the width of the parent, and make the width of the element and the shim the same on resize', function () {
+      var $stickyResizeElement = $('<div class="stick-at-top-when-scrolling js-sticky-resize"></div>')
+      var $stickyResizeWrapper = $('<div class="column-third" style="width:300px;">').append($stickyResizeElement)
+      $('body').append($stickyResizeWrapper)
+
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyResizeElement
+      GOVUK.stickAtTopWhenScrolling._hasResized = true
+      GOVUK.stickAtTopWhenScrolling.checkResize()
+
+      var stickyElementParentWidth = $stickyResizeElement.parent('div').width()
+      expect(stickyElementParentWidth).toBe(300)
+
+      var stickyElementWidth = $stickyResizeElement.width()
+      expect(stickyElementWidth).toBe(300)
+
+      var stickElementShimWidth = $('.shim').width()
+      expect(stickElementShimWidth).toBe(300)
+    })
+
     it('should unstick, if the scroll position is less than the point at which scrolling started', function () {
       GOVUK.stickAtTopWhenScrolling.getWindowPositions = function () {
         return {