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

Stop fixed position elements flying about

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2017-06-15 11:47:32 +01:00
parent 12cfd45f60
commit 84ee8b8327
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,11 +5,11 @@
overflow: hidden; overflow: hidden;
margin-left: -$gutter-half; margin-left: -$gutter-half;
margin-top: 5px; margin-top: -10px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px 0 0 $gutter-half; padding: 10px 0 0 $gutter-half;
position: relative; position: relative;
top: -10px; top: 5px;
transition: top 0.1s ease-out, box-shadow 1s ease-in-out; transition: top 0.1s ease-out, box-shadow 1s ease-in-out;
.form-group { .form-group {
@@ -27,7 +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; transition: background 0.6s ease-in-out, margin-top 0.4s ease-out;
} }
.shim { .shim {