Ensure a sticky element is unstuck for smaller screens

Add a checkResize function to check when the screen is resized and “unstick” a sticky element
if the window width is smaller than “desktop” - less than or equal to 768px.

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

@@ -8,6 +8,8 @@
   var sticky = {
     _hasScrolled: false,
     _scrollTimeout: false,
+    _hasResized: false,
+    _resizeTimeout: false,
 
     getWindowDimensions: function() {
       return {
@@ -33,7 +35,11 @@
           $(global).scroll(sticky.onScroll);
           sticky._scrollTimeout = global.setInterval(sticky.checkScroll, 50);
         }
-        $(global).resize(sticky.onResize);
+
+        if(sticky._resizeTimeout === false) {
+          $(global).resize(sticky.onResize);
+          sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50);
+        }
       }
       if(GOVUK.stopScrollingAtFooter){
         $els.each(function(i,el){
@@ -53,6 +59,9 @@
     onScroll: function(){
       sticky._hasScrolled = true;
     },
+    onResize: function(){
+      sticky._hasResized = true;
+    },
     checkScroll: function(){
       if(sticky._hasScrolled === true){
         sticky._hasScrolled = false;
@@ -73,6 +82,21 @@
         });
       }
     },
+    checkResize: function() {
+      if(sticky._hasResized === true){
+        sticky._hasResized = false;
+
+        var windowDimensions = sticky.getWindowDimensions();
+
+        sticky.$els.each(function(i, el){
+          var $el = $(el);
+
+          if(windowDimensions.width <= 768) {
+            sticky.release($el);
+          }
+        });
+      }
+    },
     stick: function($el){
       if (!$el.hasClass('content-fixed')) {
         $el.data('scrolled-from', sticky.getElementOffset($el).top);