- This topic has 19 replies, 3 voices, and was last updated 3 years, 5 months ago by Ronny.
-
AuthorPosts
-
September 30, 2020 at 5:50 am #1465147Ronny
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,
RonnySeptember 30, 2020 at 6:29 am #1465213DavidStaffCustomer SupportHi 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.
September 30, 2020 at 6:31 am #1465219RonnyHi david,
Thanks for the quick reply!
It’s not a woocommmerce page. I’ve added the url in the private information field.
Thanks,
RonnySeptember 30, 2020 at 6:39 am #1465230DavidStaffCustomer SupportHmmm…. not sure but lets have a play.
Which button is that you want displayed at the Bottom of the screen ?September 30, 2020 at 6:40 am #1465232RonnyThe second button.
September 30, 2020 at 7:13 am #1465273DavidStaffCustomer SupportStill 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>
September 30, 2020 at 7:20 am #1465288Ronnyhi David,
Yes i am able to edit all css and html as necessary.
Just let me know what i am supposed to edit.
Thanks,
RonnySeptember 30, 2020 at 7:49 am #1465462DavidStaffCustomer SupportSo 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>
September 30, 2020 at 8:02 am #1465510RonnyHi David,
The span and the button class are both added.
Thanks,
RonnySeptember 30, 2020 at 8:16 am #1465543DavidStaffCustomer SupportOK 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
hookSet the Display Rules to the posts you want this affect applied.
September 30, 2020 at 8:28 am #1465564RonnyHi David,
I’ve added the hook but it does not seem to work.
September 30, 2020 at 8:31 am #1465571DavidStaffCustomer SupportDoh – made a mistake in the CSS. Updated the Code above.
September 30, 2020 at 8:36 am #1465577RonnyAwesome! Works perfect, thanks for the a+ support.
September 30, 2020 at 8:38 am #1465583DavidStaffCustomer SupportThat is rather cool – Glad its working – must remember to add this to my snippet library 🙂
September 30, 2020 at 12:02 pm #1465845RonnyDavid,
One last question: would it make sense for performance to use wp is mobile to only use this hook on mobile devices?
Thanks,
Ronny -
AuthorPosts
- You must be logged in to reply to this topic.