Skip to content

Instantly share code, notes, and snippets.

@jarretgabel
Created April 25, 2019 13:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jarretgabel/e9a279dd67e4ad3b9f2874468c81acb3 to your computer and use it in GitHub Desktop.
Save jarretgabel/e9a279dd67e4ad3b9f2874468c81acb3 to your computer and use it in GitHub Desktop.
quick sticky method
/**
* Set sticky
*/
setSticky() {
if(!this.item) return;
const bounds = this.item.getBoundingClientRect();
const boundsTop = bounds.top < 0 ? bounds.top : 0;
const boundsBottom = bounds.bottom < this.screen.height ? bounds.bottom : 0;
if(bounds.bottom <= this.screen.height) {
if(this.state !== "bottom") {
this.state = "bottom";
if(this.screen.type !== "mobile") {
TweenMax.set(this.images, {
top: "auto",
bottom: 0,
position: "absolute",
width: "50%"
});
} else {
TweenMax.set(this.images, {
top: "auto",
position: "relative",
width: "auto"
});
}
}
TweenMax.set(this.images, { y: 0 });
} else if(bounds.top <= 1) {
if(this.state !== "top") {
this.state = "top";
if(this.screen.type === "desktop") {
TweenMax.set(this.images, {
position: "fixed",
width: "50%"
});
}
}
} else if(bounds.top > 1) {
if(this.state !== "off") {
this.state = "off";
TweenMax.set(this.images, {
top: 0,
position: "relative",
width: "auto"
});
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment