Floating button on mobile

Hi there,

if its for Woocommerce then you can enable the Display add to cart panel on scroll option in Customizer > Layout > Woocommerce

https://docs.generatepress.com/article/woocommerce-overview/#single-product

If its not for Woo then share a link to your site where i can see the CTA and ill see what we can do.

Hi david,

Thanks for the quick reply!

It's not a woocommmerce page. I've added the url in the private information field.

Thanks,
Ronny

Hmmm.... not sure but lets have a play.
Which button is that you want displayed at the Bottom of the screen ?

The second button.

Still not sure on this - but willing to look closer.
Are you able to edit the HTML within those Review boxes?

As i would need a CSS class added to the button eg. mobile-action
And just before it i need an other HTML element that can be detected when scrolled into view. Something like this:

<span class="found"></span>

hi David,

Yes i am able to edit all css and html as necessary.

Just let me know what i am supposed to edit.

Thanks,
Ronny

So after the paragraph you would add this and include the class in your <a> HTML like so:

<span class="found"></span>
<a href="https://www.your-url-here" target="_blank" class="button mobile-action" rel="nofollow noopener noreferrer">Bekijk de laagste prijs!</a>

Hi David,

The span and the button class are both added.

Thanks,
Ronny

OK so lets try this.

Create a new Hook Element

Add this JS/CSS Script for the Hook Content:

<script>
const found = document.querySelectorAll('.found');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('is-found');
    } else {
      entry.target.classList.remove('is-found');
    }
  });
});

found.forEach(find => {
  observer.observe(find);
});
</script>
<style>
@media(max-width: 768px) {
    .found:not(.is-found) + .mobile-action {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}   
</style>

Select the WP_footer hook

Set the Display Rules to the posts you want this affect applied.

Hi David,

I've added the hook but it does not seem to work.

Doh - made a mistake in the CSS. Updated the Code above.

Awesome! Works perfect, thanks for the a+ support.

That is rather cool - Glad its working - must remember to add this to my snippet library :)

David,

One last question: would it make sense for performance to use wp is mobile to only use this hook on mobile devices?

Thanks,
Ronny