From cbeade038041e514572c7adecfcaec3a36d53f21 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 15 Jun 2017 07:52:36 +0100 Subject: [PATCH] Ease fixed-position elements into place The transition between something being static in the page and fixed to the top of the viewport is a bit jarring. This commit adds a bit of animation so that, as elements become fixed, they appear to catch up with the scrolling of the page. --- .../components/stick-at-top-when-scrolling.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 dcb6ed677..82f012254 100644 --- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss +++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss @@ -5,8 +5,12 @@ overflow: hidden; margin-left: -$gutter-half; - margin-top: -10px; + margin-top: 5px; + margin-bottom: 5px; padding: 10px 0 0 $gutter-half; + position: relative; + top: -10px; + transition: top 0.1s ease-out, box-shadow 1s ease-in-out; .form-group { margin-bottom: 20px; @@ -23,6 +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; } .shim {