yahoo/react-stickynode

Examples on how to use? (bottomBoundary)

launchriot opened this issue · 5 comments

launchriot commented

Hi,

I'm using Sticky to get an element to stick once the user hits it while scrolling, but I can't get it to stop sticking. How do you use bottom boundary? I tried setting it to match the className of the sticky's parent container. I also tried setting it to an element that is below the sticky's parent container. How do I tell the sticky to stop sticking? Thanks.

rikkit commented

The string for the bottomBoundary prop has to be a fully-qualified selector, i.e. .class or #id or section . If there are multiple matches for the selector I believe it takes the first one, but you'll have to check that.

launchriot commented

Right, so shouldn't this work:

<div className="outer-wrapper">
  <div className="inner-wrapper">
    <div className="col-md-6 fix-wrapper">
        <Sticky top="#fix-wrapper" bottomBoundary="#outer-wrapper">
            <YourComponent/>
       </Sticky>
    </div>
    <div className="col-md-6">
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
    </div>
  </div>
</div>

Because for me, it starts becoming sticky at the right time, but it does not stop being sticky when outer-wrapper is out of the viewpoint. Also tried it as .outer-wrapper and outer-wrapper.

rikkit commented

#outer-wrapper shouldn't work since you're using outer-wrapper as a class name - it should be .outer-wrapper. Same for #fix-wrapper (btw - I don't think you need to configure top in this instance since it's the same as the default calculation).

  • Wondering if you have more than one instance of .outer-wrapper on the page?
  • Do you notice if released gets added to the class list when you think the component should no longer be sticky? (this classname is configurable via releasedClass prop)
  • Have you set any CSS on the sticky component?

I am using it as you are using it and it works for me.

launchriot commented

it seems like setting the bottomBoundary causes it to never scroll at all. works, but again it just keeps going to the bottom of the page. This entire thing is inside a component that is within another page component, if that matters. I have some CSS on the sticky component, what should I be looking out for? "released" does not appear at all.

launchriot commented

Finally got it by setting the boundary on the second column (the one filled with

foo

) because it seems like the first column didn't actually have a height for some reason.

Thanks for all of your responses.

  • 👍1