Revert "Remove position: sticky polyfill"

This reverts commit 6ab127f293.
This commit is contained in:
Michael Rose 2016-03-17 15:07:30 -04:00
parent 6ab127f293
commit e72642539e
8 changed files with 47 additions and 20 deletions

View file

@ -6,8 +6,6 @@
margin-bottom: 2em; margin-bottom: 2em;
@include breakpoint($medium) { @include breakpoint($medium) {
@include span(10 of 12 last); @include span(10 of 12 last);
}
@include breakpoint($large) {
@include suffix(3 of 12); @include suffix(3 of 12);
} }
} }

View file

@ -3,7 +3,6 @@
========================================================================== */ ========================================================================== */
#main { #main {
position: relative;
@include container; @include container;
@include clearfix; @include clearfix;
margin-top: 2em; margin-top: 2em;
@ -14,8 +13,6 @@
.page { .page {
@include breakpoint($medium) { @include breakpoint($medium) {
@include span(10 of 12 last); @include span(10 of 12 last);
}
@include breakpoint($large) {
padding-right: $right-sidebar-width; padding-right: $right-sidebar-width;
} }
} }
@ -26,6 +23,7 @@
} }
.page__content { .page__content {
position: relative;
p, li { p, li {
font-size: 16px; font-size: 16px;
} }

View file

@ -8,12 +8,15 @@
color: $gray; color: $gray;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@include breakpoint($large) { background-color: #fff;
position: absolute; &.sticky {
top: 0; @include breakpoint($large) {
right: calc(50% - 512px + 2em); // 50% - 1/2 of wrapper's max-width + wrapper padding position: fixed;
width: $right-sidebar-width; top: 0;
padding-left: 2em; right: calc(50% - 512px + 2em); // 50% - 1/2 of wrapper's max-width + wrapper padding
width: $right-sidebar-width;
padding-left: 2em;
}
} }
} }
@ -33,7 +36,6 @@
padding: 0; padding: 0;
width: 100%; width: 100%;
list-style: none; list-style: none;
background-color: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-top: none; border-top: none;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $border-radius;

View file

@ -152,6 +152,26 @@ body:hover .visually-hidden button {
} }
/*
Sticky, fixed to top content
========================================================================== */
.sticky {
> * {
display: none;
}
@include breakpoint($small) {
@include clearfix();
position: -webkit-sticky;
position: sticky;
top: 3em;
> * {
display: block;
}
}
}
/* /*
Wells Wells
========================================================================== */ ========================================================================== */

View file

@ -92,10 +92,10 @@ $susy: (
gutter-position: after, gutter-position: after,
container: $large, container: $large,
global-box-sizing: border-box, global-box-sizing: border-box,
// debug: ( debug: (
// image: show, image: show,
// color: blue, color: blue,
// output: overlay, output: overlay,
// toggle: top right, toggle: top right,
// ), ),
); );

8
_assets/js/plugins/stickyfill.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long