Skip to content
This repository has been archived by the owner on Jan 11, 2022. It is now read-only.

Add class when user scrolls below the sticky container #16

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

SaFrMo
Copy link

@SaFrMo SaFrMo commented Feb 28, 2017

Adds a class when the user scrolls past the container, leaving the sticky element at the bottom of the sticky-container.

@patrickbolle
Copy link

Hi there, when would this be useful?
I'm having an issue with sticky-js where the sticky part goes floats overtop a lower section, would adding a class here help me to stop that from happening?

Thanks @SaFrMo !!

@SaFrMo
Copy link
Author

SaFrMo commented Mar 27, 2017

@patrickbolle Hey! I had some elements I wanted to fade out when the sticky element reached the bottom of its container. This pull request makes that easy with just CSS:

.sticky-element .to-fade-out { 
    opacity: 1;
}

.sticky-element.stuck-bottom .to-fade-out {
    opacity: 0;
}

I don't think this is going to help in your case - it'd be best, if possible, to size the sticky-container so that it doesn't run over the lower section, or to use overflow:hidden on the sticky-container. You might be able to do some fading or z-indexing to fix your situation, too.

@SaFrMo
Copy link
Author

SaFrMo commented May 1, 2017

Added additional ability to create a sibling placeholder instead of wrapping the sticky element: new Sticky({ sibling: true }).

Wrapping sticky elements with iframes as children forces the iframes to be re-rendered, but doing so broke the iframe's content with Google DFP ads. I copied the functionality of the wrapping function and made it work the same way on a sibling span, which works as a placeholder without rerendering content.

@jamsinclair
Copy link

@SaFrMo Just want to throw some thanks your way. Your fork with these features makes this library 😍 👌

@SaFrMo
Copy link
Author

SaFrMo commented Feb 15, 2018

Thanks @jamsinclair ! 😄

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants