1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: How do I get the sticky to stop near the bottom of its container

Andre Engelbrecht pro asked 6 years ago

Hi, I've implemented a sticky component in my site. It works as expected, but there's one thing I'd like to do, but can't figure out how. I want the sticky to become unstuck when its bottom reaches the bottom of the container. Let me know if you need a code sample of a screen-shot to clarify. Thanks in advance.

Andre Engelbrecht pro commented 6 years ago

I've tried the bottomOffset prop, but I can't get that to work the way I want it.

Jakub Strebeyko staff answered 6 years ago

Hi there Andre,

First of - thank for a throughout media coverage of the case - it helped to wrap the head around. After taking the snippet and simplifying it step by step, turns out that the Sticky falls through the container bottom because of the <div> wrapper around it - getting rid of it should have your Card Sticky stop where you want it. Not sure sure why it happens, though, yet - gonna get to the bottom of it (pun intended). Anyway, let us know if there is anything else we can help you with. Concerning the notifications - have you checked the spam folder? Didn't mean to offend you, it's just - you never know!

With Best Regards,
Kuba

Andre Engelbrecht pro commented 6 years ago

Ah, eureka! That solves the problem. Outstanding work Kuba. Would love to know why the div had that unexpected effect if you can figure it out. I only had it there to include the , but was easy to work around now that I know the issue. Thanks a million. About the email notifications, I'm embarrassed to say that they were indeed in my spam folder. I don't regularly check my spam as there's never anything useful in there, so big apology there. But I'm at least happy to report that my sticky now works as expected/desired and I'm getting notifications for answers/comments. If/when you find out what's going on with the div, please post a comment here to let me know to, if you don't mind. Best regards, André

Andre Engelbrecht pro answered 6 years ago

Here's my code for the sticky:

<div className="col-md-4">
  <StickyContainer style={{ background: "black", height: "100%" }}>
    <Sticky topOffset={20} bottomOffset={20}>
      {({
        isSticky,
        wasSticky,
        style,
        distanceFromTop,
        distanceFromBottom,
        calculatedHeight
      }) => {
        let stickyHeight = (window.innerHeight - 105)

        return (
          <div>
            <br />
            <Card style={{ ...style }}>
              <CardBody style={{ height: stickyHeight }}>
                <CardTitle style={{ color: "#1565c0" }}>Side Panel</CardTitle>
                <br />
                Content...
              </CardBody>
            </Card>
          </div>
        );
      }}
    </Sticky>
  </StickyContainer>
</div>

Ollie Vincent pro commented 6 years ago

Have you tried copying the exact example on the site to see if it works correctly?

Andre Engelbrecht pro commented 6 years ago

I started from that and adapted to mine. But I don't see anything in the example that can help me figure out how to implement a stop point.

Andre Engelbrecht pro commented 6 years ago

While I'm asking question, I'm not getting any notifications when anyone replies on comments on my questions, can I change this. The subscribe button at the top of the question does have a tick next to it.

Bartłomiej Malanowski staff commented 6 years ago

@Andre, simply click "Subscribe" checkbox on the top of the page. It should work

Andre Engelbrecht pro commented 6 years ago

That's the problem, I am subscribed, but not getting any notifications. Anyway, that's a side-issue, I'd still really like to know how to implement a stop-point for my sticky content?

Jakub Strebeyko staff answered 6 years ago

Hi there Andre, Welcome back! Do I understand correctly, that by "becoming unstuck" you mean that the sticky content should return to it's original position? Generally yes, a code snippet, a screenshot or any other kind of media showcasing would be nice. With Best Regards, Kuba

Andre Engelbrecht pro commented 6 years ago

Hi Jakub I want to the sticky content to start scrolling as normal content when it hits the bottom of the container. As in the example here: https://github.com/SAEONData/ReactTemplates/blob/master/screenshots/004.png. When the sticky widgets hit the stop point they start scrolling like normal content again. If you look at my content demo site: https://github.com/SAEONData/ReactTemplates/blob/master/screenshots/001.png You'll notice that the content becomes sticky as intended: https://github.com/SAEONData/ReactTemplates/blob/master/screenshots/002.png But then moves past the bottom of the container (marked by black bg): https://github.com/SAEONData/ReactTemplates/blob/master/screenshots/003.png How do I get it to stop being sticky, i.e. get the bottom of the container to become my stop point? Hope the images help bring clarity. Thanks in advance.

Ollie Vincent pro commented 6 years ago

Hi, have you tried this link: <a href="https://mdbootstrap.com/react/advanced/react-sticky">https://mdbootstrap.com/react/advanced/react-sticky</a> This is a pro component though

Andre Engelbrecht pro commented 6 years ago

Hi Ollie, yes I did, but that does not tell me how to accomplish what I want. As I've mentioned before I thought the bottomOffset prop in the Sticky component would do the trick, but it didn't, perhaps I was using it wrong.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Andre Engelbrecht
Pro User 30Support score
4Questions 4Answers 0Snippets