Avisos
Vaciar todo

Hacer que aparezca botón a partir de "X" píxeles scroll  

 
Carles
 Carles
Estimable Member

Buenas tardes, he añadido un botón fijo ("RESERVAR CITA") en la parte inferior de la página web, para que se muestre solo en móvil. Me gustaría que este botón apareciera solo a partir de "X" píxeles de scroll; es decir, que no se vea cuando llegues a la página, sino a partir de la sección "TESTIMONIOS" por ejemplo; se puede hacer con CSS?

Adjunto una imagen para que se entienda mejor a qué botón me refiero.

botón fijo scroll

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 10/10/2021 5:20 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Con solo CSS no es posible, salvo que el botón se encuentre en la posicion de testimonios, a partir de allí se mostraría como fixed con

position: sticky;

Si lo quieres hacer fijo a partir de testimonios, estando el botón en cualquier otra posición entonces necesitas código javascript.

Saludos.

ResponderCitar
Respondido : 10/10/2021 5:48 pm

Carles
 Carles
Estimable Member

@jmarreros Hola John, gracias por tu respuesta. Hice lo de dejarlo al final de la sección TESTIMONIOS, con CSS "position: sticky;" pero no queda fijado. Me podrías ayudar por favor?

El código que he introducido es el siguiente:

.elementor-7612 .elementor-element.elementor-element-980f720 .elementor-button {
position: sticky;
}

Me va igual de bien tanto que aparezca de golpe a partir de X píxeles (a partir de código Javascript), como si ya está en la sección TESTIMONIOS y después de ella se queda fijo en la parte inferior de la pantalla (lo que comentas de "sticky"). 

Muchas gracias

ResponderCitar
Respondido : 10/10/2021 6:13 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El problema puede ser que tengas una estructura que no facilita hacerlo directamente por CSS, según parece para que funcione sticky debe hacerlo directamente en un ancentro scrollable, y en el caso de constructores como Elementor hay mucho código como contenedores.

Llegados a este punto, mejor usa directamente Elementor para hacerlo, revisa este enlace:
https://elementor.com/help/fixed-positioning-for-widgets/

Saludos.

ResponderCitar
Respondido : 10/10/2021 9:08 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress