Floating button on mobile

[Ronny]

Hi Guy’s,

I have an call to action button on a page. On mobile I would like this button to be fixed on the bottom of the page and when the users reaches the actual button on the page the button would return to normal.

An exact example of this behavior can you check out here (in mobile view): https://www.wehkamp.nl/anytime-lang-gewatteerde-jas-donkergroen-16507877/

Can you help me implement such behavior on generate press?

Thanks,
Ronny

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

The second button.

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

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

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

Hi David,

The span and the button class are both added.

Thanks,
Ronny

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

Hi David,

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

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

[David]

That is rather cool – Glad its working – must remember to add this to my snippet library 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ronny]

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

[Author]

Posts