Search code examples
javascriptcssstickysticky-footer

Issue with position:sticky footer containing buttons

I have a floating div at the bottom of my page which consists of two buttons. To make the floating button persist at the footer, I used position:sticky

The issue I am facing is that when the button floats over other buttons in the page, any click on the buttons in the footer itself is disregarded and rather the click on the underlying buttons is recorded. The footer's buttons' click action is being disregarded.

I tried to deregister the click event when the buttons are out of view, taking into consideration the height of the floating footer, but even that doesn't work. Is there a way to tackle this issue?

Solution

  • The reason is because position sticky not actually put the footer button on top of the other when they overlap. To achieve what you want, simply put z-index to the sticky button (or your footer in this case)

    .sticky-button {
 position: sticky;
 z-index: 1000;
}

    This will make the sticky button overlay the content, and when you click, the function in the sticky button should be trigger