[Resolved] Stop sticky widget being sticky before it reach bottom of the page

Home Forums Support [Resolved] Stop sticky widget being sticky before it reach bottom of the page

Home Forums Support Stop sticky widget being sticky before it reach bottom of the page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2342572
    Pintu

    Hi, I’ve added the following CSS

    @media(min-width: 769px) {
        .inside-right-sidebar {
            height: 100%;
        }
        .inside-right-sidebar .widget:last-child {
            position: -webkit-sticky;
            position: sticky;
            top: 70px;
        }
    }

    to make the last widget sticky in the sidebar and it is working fine. However, I want to customize it further.

    Is there any way to stop the sticky widget from being sticky as soon as it reaches near the bottom of the page while scrolling?

    Fixed Widget and Sticky Elements for WordPress plugin got the function I’m wanting to implement but I want CSS for this.

    Please help, thanks in advance.

    #2342615
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS instead:

    @media(min-width: 769px) {
        .inside-right-sidebar {
            min-height: 100%;
        }
        .inside-right-sidebar .widget:last-child {
            position: -webkit-sticky;
            position: sticky;
            top: 70px;
            margin-bottom: 60px;
        }
    }

    The difference is the height: 100%; is changed to min-height: 100%;

    #2342627
    Pintu

    It didn’t work.

    Screenshot-2022-09-14-182549

    You can see the ad is still sticking till the bottom of the page.

    #2342638
    David
    Staff
    Customer Support

    I updated the CSS above to include the margin-bottom: 60px; property. Give that a try.

    #2342639
    Pintu

    Got it.

    Thanks for the help. 🙂

    #2342651
    David
    Staff
    Customer Support

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.