[Resolved] Floating button on mobile

Home Forums Support [Resolved] Floating button on mobile

Home Forums Support Floating button on mobile

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1465147
    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

    #1465213
    David
    Staff
    Customer Support

    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.

    #1465219
    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

    #1465230
    David
    Staff
    Customer Support

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

    #1465232
    Ronny

    The second button.

    #1465273
    David
    Staff
    Customer Support

    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>

    #1465288
    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

    #1465462
    David
    Staff
    Customer Support

    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>
    #1465510
    Ronny

    Hi David,

    The span and the button class are both added.

    Thanks,
    Ronny

    #1465543
    David
    Staff
    Customer Support

    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.

    #1465564
    Ronny

    Hi David,

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

    #1465571
    David
    Staff
    Customer Support

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

    #1465577
    Ronny

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

    #1465583
    David
    Staff
    Customer Support

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

    #1465845
    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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.