Amend GOVUK.stickAtTopWhenScrolling to "unstick" for smaller screens

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

@@ -8,7 +8,23 @@
   var sticky = {
     _hasScrolled: false,
     _scrollTimeout: false,
+    _hasResized: false,
+    _resizeTimeout: false,
 
+    getWindowDimensions: function() {
+      return {
+        height: $(global).height(),
+        width: $(global).width()
+      };
+    },
+    getWindowPositions: function() {
+      return {
+        scrollTop: $(global).scrollTop()
+      };
+    },
+    getElementOffset: function($el) {
+      return $el.offset()
+    },
     init: function(){
       var $els = $('.js-stick-at-top-when-scrolling');
 
@@ -19,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){
@@ -39,26 +59,47 @@
     onScroll: function(){
       sticky._hasScrolled = true;
     },
+    onResize: function(){
+      sticky._hasResized = true;
+    },
     checkScroll: function(){
       if(sticky._hasScrolled === true){
         sticky._hasScrolled = false;
 
-        var windowVerticalPosition = $(global).scrollTop();
+        var windowVerticalPosition = sticky.getWindowPositions().scrollTop;
+
+        var windowDimensions = sticky.getWindowDimensions();
+
         sticky.$els.each(function(i, el){
           var $el = $(el),
               scrolledFrom = $el.data('scrolled-from');
 
           if (scrolledFrom && windowVerticalPosition < scrolledFrom){
             sticky.release($el);
-          } else if($(global).width() > 768 && windowVerticalPosition >= $el.offset().top) {
+          } else if(windowDimensions.width > 768 && windowVerticalPosition >= sticky.getElementOffset($el).top) {
             sticky.stick($el);
           }
         });
       }
     },
+    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', $el.offset().top);
+        $el.data('scrolled-from', sticky.getElementOffset($el).top);
         var height = Math.max($el.height(), 1);
         $el.before('<div class="shim" style="width: '+ $el.width() + 'px; height: ' + height + 'px">&nbsp;</div>');
         $el.css('width', $el.width() + "px").addClass('content-fixed');

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

@@ -13,27 +13,109 @@ describe("stick-at-top-when-scrolling", function(){
     $stickyWrapper.remove();
   });
 
-  it('should add fixed class on stick', function(){
-    expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($stickyElement.hasClass('content-fixed')).toBe(true);
+  describe('when stick is called', function(){
+
+    it('should add fixed class on stick', function(){
+      expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($stickyElement.hasClass('content-fixed')).toBe(true);
+    });
+
+    it('should insert shim when sticking the element', function(){
+      expect($('.shim').length).toBe(0);
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($('.shim').length).toBe(1);
+    });
+
+    it('should insert shim with minimum height', function(){
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($('.shim').height()).toBe(1);
+    });
+
   });
 
-  it('should remove fixed class on release', function(){
-    $stickyElement.addClass('content-fixed');
-    GOVUK.stickAtTopWhenScrolling.release($stickyElement);
-    expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
+  describe('when release is called', function(){
+
+    it('should remove fixed class', function(){
+      $stickyElement.addClass('content-fixed');
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement);
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
+    it('should remove the shim', function(){
+      $stickyElement = $('<div class="stick-at-top-when-scrolling content-fixed"></div>');
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement);
+      expect($('.shim').length).toBe(0);
+    });
+
   });
 
-  it('should insert shim when sticking content', function(){
-    expect($('.shim').length).toBe(0);
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($('.shim').length).toBe(1);
+  describe('for larger screens (>768px)', function(){
+
+    beforeEach(function() {
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function(){
+        return {
+          scrollTop: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function(){
+        return {
+          top: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function(){
+        return {
+          height: 768,
+          width: 769
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+    });
+
+    it('should stick, if the scroll position is past the element position', function(){
+      expect($stickyElement.hasClass('content-fixed')).toBe(true);
+    });
+
+    it('should unstick, if the scroll position is less than the point at which scrolling started', function(){
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function() {
+        return {
+          scrollTop: 0
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
   });
 
-  it('should insert shim with minimum height', function(){
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($('.shim').height()).toBe(1);
+  describe('for smaller screens (<=768px)', function(){
+
+    beforeEach(function() {
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function() {
+        return {
+          height: 768,
+          width: 767
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function() {
+        return {
+          top: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+    });
+
+    it('should unstick the element', function(){
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
   });
+
 });