Merge pull request #1067 from alphagov/back-to-top-link

Fix for sticky contents link overlap issue
alphagov · Jun 8, 2017 · 01fef6d · 01fef6d
2 parents a1c9cd5 + 01af70e
commit 01fef6d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 24 deletions.
diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js
@@ -46,7 +46,7 @@
         setInterval(checkScroll, _interval);
         checkResize();
         checkScroll();
-        $element.addClass('govuk-sticky-element');
+        $element.addClass('govuk-sticky-element--enabled');
       }
 
       function onResize () {
@@ -99,11 +99,9 @@
 
       function stickToWindow () {
         $element.addClass('govuk-sticky-element--stuck-to-window');
-        $element.removeClass('govuk-sticky-element--stuck-to-parent');
       }
 
       function stickToParent () {
-        $element.addClass('govuk-sticky-element--stuck-to-parent');
         $element.removeClass('govuk-sticky-element--stuck-to-window');
       }
 

diff --git a/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss b/app/assets/stylesheets/govuk-component/_govspeak-html-publication-print.scss
@@ -1,5 +1,5 @@
 .govuk-govspeak-html-publication {
-  .sticky-element {
+  .govuk-sticky-element {
     display: none;
   }
 }
diff --git a/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss b/app/assets/stylesheets/govuk-component/_govspeak-html-publication.scss
@@ -195,7 +195,7 @@
     // scss-lint:enable QualifyingElement
   }
 
-  .sticky-element {
+  .govuk-sticky-element {
     clear: both;
   }
 }
diff --git a/app/assets/stylesheets/modules/_sticky-element-container.scss b/app/assets/stylesheets/modules/_sticky-element-container.scss
@@ -1,6 +1,20 @@
-.govuk-sticky-element {
-  @include transition (opacity, .3s, ease);
-  opacity: 1;
+.js-enabled .govuk-sticky-element {
+  position: absolute;
+  bottom: 0;
+
+  &--stuck-to-window {
+    bottom: 0;
+    position: fixed;
+  }
+
+  &--enabled {
+    @include transition (opacity, .3s, ease);
+    opacity: 1;
+
+    @include media(mobile) {
+      position: static;
+    }
+  }
 
   &--hidden {
     opacity: 0;
@@ -13,17 +27,4 @@
     }
   }
 
-  &--stuck-to-parent {
-    bottom: 0;
-    position: absolute;
-  }
-
-  &--stuck-to-window {
-    bottom: 0;
-    position: fixed;
-  }
-
-  @include media(mobile) {
-    position: static;
-  }
 }
diff --git a/app/views/govuk_component/govspeak_html_publication.raw.html.erb b/app/views/govuk_component/govspeak_html_publication.raw.html.erb
@@ -14,7 +14,7 @@
 >
   <%= render file: 'govuk_component/govspeak.raw', locals: govspeak_locals %>
   <% if sticky_footer_html %>
-    <div data-sticky-element class="sticky-element">
+    <div data-sticky-element class="govuk-sticky-element">
       <%= raw sticky_footer_html %>
     </div>
   <% end %>

diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js
@@ -48,7 +48,6 @@ describe('A sticky-element-container module', function () {
 
         expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false);
         expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(true);
-        expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(false);
       });
 
       it('shows the element, stuck to the parent, when scrolled at the bottom', function () {
@@ -61,7 +60,6 @@ describe('A sticky-element-container module', function () {
 
         expect($footer.hasClass('govuk-sticky-element--hidden')).toBe(false);
         expect($footer.hasClass('govuk-sticky-element--stuck-to-window')).toBe(false);
-        expect($footer.hasClass('govuk-sticky-element--stuck-to-parent')).toBe(true);
       });
     });
   });