[Support request] floating button like sticky nav, with no menu

[Jeffrey]

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

[Fernando]

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! 🙂

[Jeffrey]

WOW! THANK YOU. This is amazing 🙂

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

[Fernando]

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

[Author]

Posts