Might have figured it out.
.fixed is used to set it to the bottom of a non-scrolling screen.
.sticky is used to set it to the bottom of a scrolling screen.
.blur is used to blur the background of the sticky button, so the content is slightly visible.
I found that creating a separate container that only housed the button and apply the CSS to the container, not the button gave me the best results.
div[class*="main-content___StyledDiv"] >:last-child {
padding-bottom: 60px! important;
}
.fixed {
bottom: 0;
left: 0;
right: 0;
z-index: 1999;
position: absolute;
}
.sticky {
bottom: 0;
left: 0;
right: 0;
z-index: 1999;
position: sticky;
}
.blur {
background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}