floating button like sticky nav, with no menu

you mean the fade? I would like to give it a shot. If possible

Hi Jeffrey,

Here is a simple Javascript you may try:

<script>
var footer = document.querySelector('.my-sticky');
window.addEventListener("scroll", function(){
  footer.classList.toggle('hide-sticky', 
    this.innerHeight + this.scrollY >= ((document.scrollingElement.scrollHeight)*9)/10);
});
</script>

Adding this through a Hook Element hooked to wp_footer should work: https://share.getcloudapp.com/QwuLlK4l

Kindly set the display rules as you would prefer.

Then, to make this code work, you would need to add class my-sticky to whichever you want to hide when the scroll reaches around 9/10ths of the screen: https://share.getcloudapp.com/6quZ25Eg

If you wish to hide it at a different position of the screen, kindly replace 9 and 10 to your preferred screen ratio.

Lastly, add this CSS:

.hide-sticky{
	display:none !important;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

For a fade effect, here are some codes you may explore:

https://www.impressivewebs.com/animate-display-block-none/#:~:text=animate%20the%20opacity.-,A%20Possible%20Solution,-There%20are%20probably

re-javascript/#:~:text=The%20fadeOut%20effect%20is%20used,clearInterval%20method%20in%20this%20logic.

Hope this helps! :)

WOW! THANK YOU. This is amazing :)

All of you here are amazing! Best template and support ever.

You’re welcome Jeffrey! We're glad to be of assistance! Feel free to reach out anytime if assistance with anything else is needed. :)