How to make element sticky at bottom of page

  • Resolved amsharma

    (@amsharma)


    5 years, 6 months ago

    Hi,

    I would like to know how I can make an element sticky at the bottom of the page. The section I want to add is currently disabled on the live website and the plugin is not yet installed. It is an Elementor section with News & Forum in two horizontal halfs. I want that to be static at the bottom one-third portion.

    Another related query. It works on my local test setup but at the top and the other critical issue is the website scrolls behind with both texts being visible. I would like the sticky portion to have opaque background. Website should not be visible behind the sticky portion.

    Thanks
    Amal

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • My plugin is designed to make elements sticky at the top only, once they reach the top after scrolling. Sticky at bottom is currently not a feature.

    For your other issue, you will need to give your element an opaque background with CSS code. I’m not directly seeing this on your site, so I can’t exactly say what needs to be done. If you can show me how it looks now, I may be able to help.

    Thread Starter amsharma

    (@amsharma)

    Thanks a lot for your prompt reply. I have made the element visible and installed your plugin. I gave it a light background colour so now it doesn’t show website behind it (which is scrolling). I gave a 400px gap from top just to test. It works but has issues. The section which I have made sticky shows up as large gap while scrolling website (we can probably find a solution for that, maybe take it to the bottom of page etc). Hard coding gap from top for sticky element has responsiveness issues on mobile devices. It doesn’t show up well on a mobile. The element ID is #news-forum.

    • This reply was modified 5 years, 6 months ago by amsharma.
    • This reply was modified 5 years, 6 months ago by amsharma.

    By adding a 400px gap at the top, things will not work properly, since not every device/screen has a different height, so the element will not be at the bottom on every device.

    My plugin may not be suitable for what you’re trying to do. It can only stick elements at the top of the screen, so you may need to find a different plugin or custom coding.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make element sticky at bottom of page’ is closed to new replies.