JeremyBen Posted September 26 Share Posted September 26 (edited) Site URL: https://www.riceshandymansolutions.com/ So far this is the code i have to make a button and have it scroll. however, i need it to only show up on mobile for people to call me once they click it. i also need it to pin to the footer once it lands on the footer part only. that way it wont overlap the info in the footer. ive looked for hours but cant find anything. PLEASEEEE any help would be awesome! thank you <a href="https://www.riceshandymansolutions.com/callusnow" class="tp-button">Call Now</a> <style> a.tp-button { background-color: #0b1d42 !important; color: white !important; padding: 20px 30px; border-radius: 50px; position: fixed; bottom: 20px; right: 20px; z-index: 9999; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } @keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } </style> <style> a.tp-button:hover { opacity: 0.8; } </style> Edited September 26 by JeremyBen Link to comment
tuanphan Posted September 28 Share Posted September 28 I see you remove buttoned. Do you still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JeremyBen Posted September 29 Author Share Posted September 29 Yes i do. it was on my live page and i had customers trying to click a button that didn't work. i can place it back right now. Link to comment
Dev_pages Posted September 29 Share Posted September 29 Add this css to yours @media (min-width: 576px) { .tp-button { display: none !important; } } .tp-button.no-fixed { position: static; } And try this simple JS code const fixedBtn = document.querySelector(".tp-button") const mainFooter = document.querySelector('#footer-sections'); window.addEventListener('scroll', () => { const footerTop = mainFooter.offsetTop; const scrollPosition = window.scrollY + window.innerHeight; if (scrollPosition >= footerTop) { fixedBtn.classList.add("no-fixed") } else { fixedBtn.classList.remove("no-fixed") } }); Link to comment
JeremyBen Posted September 30 Author Share Posted September 30 On 9/29/2024 at 10:04 AM, Dev_pages said: Add this css to yours @media (min-width: 576px) { .tp-button { display: none !important; } } .tp-button.no-fixed { position: static; } And try this simple JS code const fixedBtn = document.querySelector(".tp-button") const mainFooter = document.querySelector('#footer-sections'); window.addEventListener('scroll', () => { const footerTop = mainFooter.offsetTop; const scrollPosition = window.scrollY + window.innerHeight; if (scrollPosition >= footerTop) { fixedBtn.classList.add("no-fixed") } else { fixedBtn.classList.remove("no-fixed") } }); I got your first code to work! now the button only shows up for mobile users. however when i use my phone to click the link, it doesn't work. also, your 2nd code doesn't seem to do anything. Link to comment
tuanphan Posted October 3 Share Posted October 3 On 10/1/2024 at 6:48 AM, JeremyBen said: I got your first code to work! now the button only shows up for mobile users. however when i use my phone to click the link, it doesn't work. also, your 2nd code doesn't seem to do anything. I see button already works, I tried click button and it open call app now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment