From 84ee8b8327e29fb8be55af0a69c812c731335f7a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 15 Jun 2017 11:47:32 +0100
Subject: [PATCH] Stop fixed position elements flying about
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Normally, fixed position elements are positioned at `top: 0`.

The code that stops them from overlapping the footer does so by:
- setting the position to absolulte
- setting `top` to a calculated value (eg `1500px`) which makes it sit
  above the footer

The problem is caused because we’re animating `top`, so when scrolling
back up the page elements are getting animated from `1500px` to `0px`,
ie flying up from the bottom of the screen.
---
 .../stylesheets/components/stick-at-top-when-scrolling.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index 82f012254..cd87884f1 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -5,11 +5,11 @@
 
   overflow: hidden;
   margin-left: -$gutter-half;
-  margin-top: 5px;
+  margin-top: -10px;
   margin-bottom: 5px;
   padding: 10px 0 0 $gutter-half;
   position: relative;
-  top: -10px;
+  top: 5px;
   transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
 
   .form-group {
@@ -27,7 +27,7 @@
   padding-right: $gutter-half;
   border-bottom: 1px solid $border-colour;
   box-shadow: 0 2px 0 0 rgba($border-colour, 0.2);
-  transition: background 0.6s ease-in-out, top 0.4s ease-out, margin-top 0.4s ease-out;
+  transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
 }
 
 .shim {