Skip to content

Commit

Permalink
Merge pull request #1018 from appnexus/sticky-offset
Browse files Browse the repository at this point in the history 
Add topOffset prop to the StickySection
  • Loading branch information
@jhsu
jhsu authored Aug 8, 2019
2 parents 90d66e9 + 4e64632 commit 66126ca
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 4 deletions.
18 changes: 14 additions & 4 deletions src/components/StickySection/StickySection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const StickySection = createClass({
Width of section when it sticks to the top edge of the screen. When
omitted, it defaults to the last width of the section.
`,
topOffset: number`
Top offset threshold before sticking to the top. The sticky content will
display with this offset.
`,
},

getInitialState() {
Expand All @@ -49,14 +53,14 @@ const StickySection = createClass({
};
},

handleScroll() {
const { lowerBound } = this.props;
handleScroll(e) {
const { lowerBound, topOffset } = this.props;

const { isAboveFold, containerRect } = this.state;

const nextContainerRect = this.getContainerRect();

if (window.pageYOffset >= nextContainerRect.top) {
if (window.pageYOffset + topOffset >= nextContainerRect.top) {
if (!isAboveFold) {
this.setState({
isAboveFold: true,
Expand Down Expand Up @@ -128,6 +132,7 @@ const StickySection = createClass({
children,
className,
style,
topOffset,
viewportWidth,
...passThroughs
} = this.props;
Expand All @@ -142,6 +147,7 @@ const StickySection = createClass({
...(isAboveFold
? {
height: containerRect.height,
visibility: 'hidden',
}
: {}),
...style,
Expand All @@ -154,8 +160,9 @@ const StickySection = createClass({
style={{
...(isAboveFold
? {
visibility: 'visible',
position: 'fixed',
top: 0,
top: topOffset,
width: _.isNumber(viewportWidth)
? viewportWidth
: containerRect.width,
Expand Down Expand Up @@ -191,5 +198,8 @@ const StickySection = createClass({
);
},
});
StickySection.defaultProps = {
topOffset: 0,
};

export default StickySection;
35 changes: 35 additions & 0 deletions src/components/StickySection/__snapshots__/StickySection.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,38 @@ exports[`StickySection [common] example testing should match snapshot(s) for 3.s
</div>
</div>
`;

exports[`StickySection [common] example testing should match snapshot(s) for 4.top-offset 1`] = `
<div
className="lucid-StickySection"
style={
Object {
"backgroundColor": "#2abbb0",
"color": "white",
}
}
>
<div
className="lucid-StickySection-sticky-frame"
style={
Object {
"backgroundColor": "#2abbb0",
"color": "white",
}
}
>
<div
className="lucid-StickySection-sticky-section"
style={
Object {
"backgroundColor": "#2abbb0",
"color": "white",
"position": "relative",
}
}
>
This section has no lower bounds! but has a topOffset
</div>
</div>
</div>
`;
1 change: 1 addition & 0 deletions src/components/StickySection/examples/3.standard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default createClass({
style={{
color: 'rgba(128,128,128,.25)',
marginBottom: 700,
height: 3000,
}}
>
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
Expand Down
202 changes: 202 additions & 0 deletions src/components/StickySection/examples/4.top-offset.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
import React from 'react';
import createClass from 'create-react-class';
import { StickySection } from '../../../index';

export default createClass({
render() {
return (
<section
style={{
color: 'rgba(128,128,128,.25)',
marginBottom: 700,
height: 3000,
}}
>
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray.
<StickySection
topOffset={100}
style={{ backgroundColor: '#2abbb0', color: 'white' }}
>
This section has no lower bounds! but has a topOffset
</StickySection>
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray. Post-ironic
health goth austin mixtape mlkshk. Cold-pressed ennui messenger bag
viral migas. Artisan freegan cold-pressed offal, flexitarian shabby chic
polaroid banjo four dollar toast four loko williamsburg. Taxidermy ramps
fap vegan bushwick pug, kickstarter scenester actually cornhole locavore
man bun chambray. Post-ironic health goth austin mixtape mlkshk.
Cold-pressed ennui messenger bag viral migas. Artisan freegan
cold-pressed offal, flexitarian shabby chic polaroid banjo four dollar
toast four loko williamsburg. Taxidermy ramps fap vegan bushwick pug,
kickstarter scenester actually cornhole locavore man bun chambray.
Post-ironic health goth austin mixtape mlkshk. Cold-pressed ennui
messenger bag viral migas. Artisan freegan cold-pressed offal,
flexitarian shabby chic polaroid banjo four dollar toast four loko
williamsburg. Taxidermy ramps fap vegan bushwick pug, kickstarter
scenester actually cornhole locavore man bun chambray.
</section>
);
},
});

0 comments on commit 66126ca

Please sign in to comment.