darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Ease fixed-position elements into place

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2017-06-15 07:52:36 +01:00
parent de4b2e6413
commit cbeade0380
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -5,8 +5,12 @@
overflow: hidden; overflow: hidden;
margin-left: -$gutter-half; margin-left: -$gutter-half;
margin-top: -10px; margin-top: 5px;
margin-bottom: 5px;
padding: 10px 0 0 $gutter-half; padding: 10px 0 0 $gutter-half;
position: relative;
top: -10px;
transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
.form-group { .form-group {
margin-bottom: 20px; margin-bottom: 20px;
@@ -23,6 +27,7 @@
padding-right: $gutter-half; padding-right: $gutter-half;
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
box-shadow: 0 2px 0 0 rgba($border-colour, 0.2); 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 { .shim {